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.