Question

I’ve been having a problem with the javascript “innerHTML” function when using forms. I’ve been adding more options to a form (and sending them to the server in an array e.g. foo[] ). The problem is, if the user presses to add another element to the form to add another option, the previous options they have selected are deleted.

What I want to happen is just add another element of the same type inside a tag. I am targeting IE9 and not using any frameworks. I am using:

document.getElementById("contents").innerHTML += this.item;

Where this.item is the code I want to add to the end of the row.

What I’m wondering is, would recursing through a tree of the code I want to add to create a node tree and then using appendChild be the best way to do it, or is there a better way?

Answer 1

Literally never use innerHTML +=, it will mess up everything.

insertAdjacentHTML is meant for these cases and has been supported since IE4

So:

document.getElementById("contents").insertAdjacentHTML( "beforeend", this.item )