Take the 2-minute tour ×

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?

share|improve this question
Did they told you what to use instead of element.innerHTML +=? –  this.lau_ Jul 17 '12 at 2:55
I doubt whoever warned you against it has a good reason for doing so in 2012. Browsers are fast and support for this property is nearly universal. Other than sticking to a particular library's facilities (if you're using jQuery, use the $() constructor to create elements) I don't see any problem any more. As always though, test and find out. –  Triptych Jul 17 '12 at 2:57
you should read this article : taligarsiel.com/Projects/howbrowserswork1.htm –  Hacker Wins Jul 17 '12 at 3:38
@Triptych: There are considerations other than performance. For example, since the DOM subtree of the main element is completely reconstructed, event handlers on the existing elements will be destroyed. Also, any <script> within the element will be rerun in some browsers. Finally, there is no guarantee that elm.innerHTML = elm.innerHTML will always reproduce an identical copy of the element's DOM. –  Tim Down Sep 25 '12 at 12:30

4 Answers 4

up vote 10 down vote accepted

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>';

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.

share|improve this answer
In this example, he only sets innerHTML once though, so I'm not sure this answer the question. –  this.lau_ Jul 17 '12 at 2:54
but what if the target have already some important stuff that we want to keep (e.g appending to the body)?, this would erase it –  ajax333221 Jul 17 '12 at 2:55
Okay say that innerHTML had 200,000 bytes of stuff in it. Then, you append a single <div>Hello</div>. Now, you're re-parsing 200,000 bytes plus the single DIV and re-constructing that entire DOM over again. It would be far better to just call appendChild() once and insert into the existing DOM directly. –  Mike Christensen Jul 17 '12 at 3:03
Don't forget that it also demolishes any stateful data on the nodes that were destroyed. This includes event handlers. –  squint Jul 17 '12 at 3:29
Umm... you are putting a div inside a paragraph. That's not exactly a valid HTML. –  Jan Dvorak Jun 30 '13 at 14:03

The alternative is .createElement(), .textContent, and .appendChild(). Appending with += is only an issue if you're dealing with a lot of data.

Demo: http://jsfiddle.net/ThinkingStiff/v6WgG/


var elm = document.getElementById( 'targetID' ),
    div = document.createElement( 'div' );
div.textContent = 'goodbye world';
elm.appendChild( div );


<div id="targetID">hello world</div>
share|improve this answer

If the user has older versions of IE (or maybe newer ones too, haven't tried), innerHTML on a td will cause issues. Table elements in IE are read-only, tsk tsk tsk.

share|improve this answer

Mike's answer is probably the better one, but another consideration is that you are dealing with strings. And string concatenation in JavaScript can be really slow especially in some older browsers. If you are just concatenating little fragments from HTML then it probably isn't noticeable, but if you have a major part of the page that you are appending something to repeatedly you very well could see a noticeable pause in the browser.

share|improve this answer

Your Answer


