The question is, comparing concatination using innerHTML and appending a text node to an existing node. What is happening behind the scene?
My thoughts around this so far:
I'm hoping you people can clear this up for me, thanks!
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.
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.)
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
In short, if you're appending, I'd use
insertAdjacentHTML, see below). 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).
Finally, it's worth mentioning
insertAdjacentHTML, which is a function that you can use to insert nodes and elements into or next to an element using an HTML string. You can append to an element with it:
theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); The first argument is where to put the HTML; your choices are
"beforebegin" (outside the element, just in front of it),
"afterbegin" (inside the element, at the beginning),
"beforeend" (inside the element, at the end), and
"afterend" (outside the element, just in after it). Note that
"beforeend" insert into the element itself, whereas
"afterend" insert into the element's parent. Supported by all major desktop browsers, I have no idea how good mobile support is (although I'm sure iOS Safari and Android 2.x and up have it, at least), but the shim is tiny.
I've created a small gist with a performance comparison between innerHTML and appendChild.
The last one wins by a wide margin
©2020 All rights reserved.