"innerHTML += ..." vs "appendChild(txtNode)"

Question

The question is, comparing concatination using innerHTML and appending a text node to an existing node. What is happening behind the scene?

My thoughs around this so far:

• I'm guessing both are causing a 'ReFlow'.
• The later, from what I know, also causes a complete rebuild of the DOM (correct? Are they both doing this?).
• The former seems to have some other nasty side effects, like causing previously saved references to child nodes to the node I'm modifying innerHTML, to no longer point to 'the current DOM'/'correct version of the child node'. In contrast, when appending children, references seem to stay intact. Why is this?

I'm hoping you people can clear this up for me, thanks!

Answer 1

The latter (appendChild) does not cause a complete rebuild of the DOM or even all of the elements/nodes within the target.

The former (setting innerHTML) does cause a complete rebuild of the content of the target element, which if you're appending is unnecessary.

Appending via innerHTML += content makes the browser run through all of the nodes in the element building an HTML string to give to the JavaScript layer. Your code then appends text to it and sets innerHTML, causing the browser to drop all of the old nodes in the target, re-parse all of that HTML, and build new nodes. So in that sense, it may not be efficient. (However, parsing HTML is what browsers do and they're really, really fast at it.)

Setting innerHTML does indeed invalidate any references to elements within the target element you may be holding -- because those elements don't exist anymore, you removed them and then put in new ones (that look very similar) when you set innerHTML.

In short, if you're appending, I'd use appendChild. If you're replacing, there are very valid situations where using innerHTML is a better option than creating the tree yourself via the DOM API (speed being chief amongst them).