I have been told not to append stuff using element.innerHTML += ...
like this:
var str = "<div>hello world</div>";
var elm = document.getElementById("targetID");
elm.innerHTML += str; //not a good idea?
What is wrong with it?, what other alternatives do I have?
Every time innerHTML
is set, the HTML has to be parsed, a DOM constructed, and inserted into the document. This takes time.
For example, if elm.innerHTML
has thousands of divs, tables, lists, images, etc, then calling .innerHTML += ...
is going to cause the parser to re-parse all that stuff over again. This could also break references to already constructed DOM elements and cause other chaos. In reality, all you want to do is append a single new element to the end.
It's better to just call appendChild
:
var newElement = document.createElement('div');
newElement.innerHTML = '<div>Hello World!</div>';
elm.appendChild(newElement);
This way, the existing contents of elm
are not parsed again.
NOTE: It's possible that [some] browsers are smart enough to optimize the +=
operator and not re-parse the existing contents. I have not researched this.