'"innerHTML += ..." vs "appendChild(txtNode)"
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 guessing both are causing a 'ReFlow'.
- The latter (appending a text node), 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!
Solution 1:[1]
I've created a small gist with a performance comparison between innerHTML and appendChild.
The last one wins by a wide margin
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | oliferna |