Take the 2-minute tour ×

I have these two lines of code in my JavaScript that creates two new HTML forms for the user to input data each time the containing function is called. Right now, each time the new 2 forms are created the input of the previous ones are erased, I think I know why, it has to do with the second line and how I set the innerHTML. I can't seem to figure out another way of doing it however, any help with this is greatly appreciated!


var newForm = "<b>Checkpoint " + markerId + ":</b> Name <input type='text' id=" + markerId + "> Description <input type ='text' id=" + markerId + "desc style='width:480px;height:58px;'>     <button type='submit' value='Remove' onClick='remove_checkpoint();' /> <br />";
document.getElementById("divForms").innerHTML = document.getElementById("divForms").innerHTML  + "<br />" + newForm;
share|improve this question
add comment

2 Answers

up vote 3 down vote accepted

Learn about DOM methods like createElement and appendChild.

var div = document.createElement("div");
div.innerHTML = "<b>Your code</b>";
share|improve this answer
That worked perfectly! Thanks so much. The only difference was that I used appendChild instead of just append. –  intA Apr 15 '13 at 17:00
in JavaScript there is no append() method!!! do not confuse with jQuery –  Givi Apr 15 '13 at 17:14
@Givi, I just typed it wrong in the code sample, had it right in the explaination. You could have edited it. ;) –  epascarello Apr 15 '13 at 17:31
Sorry I did not notice ;) –  Givi Apr 15 '13 at 17:47
add comment

You're getting the inner html which doesn't contain the value you typed in the field (just try to display source to convince yourself). I think what you're looking for is the jQuery append method (if you're ok to use jQuery...)

share|improve this answer
add comment

Your Answer


