“innerHTML + = ...” vs“appendChild（txtNode）” [英] "innerHTML += ..." vs "appendChild(txtNode)"
问题描述
我到目前为止的想法：
- 我猜这两个都是导致
'ReFlow'。 - 后者（附加文本节点），从我所知道的，也会导致完全重建DOM （正确的，他们都这样做吗？）。
- 前者似乎还有一些其他令人讨厌的副作用，像先前保存的子节点引用到我正在修改innerHTML的节点，不再指向当前DOM/子节点的正确版本。相反，当追加孩子时，参考文献似乎保持不变。为什么是这样？
我希望你们能为我清除这一点，谢谢！
后者（ appendChild ）不导致完全重建DOM或甚至目标中的所有元素/节点。
前者（设置 innerHTML ）确实导致完全重建目标元素的内容，如果你需要附加的话，那就是不必要的。
通过 innerHTML + = content 使浏览器运行在构建HTML字符串的元素中的所有节点，以提供给JavaScript层。你的代码然后将文本附加到它并设置 innerHTML ，导致浏览器删除目标中的所有旧节点，重新解析所有的HTML，并构建新节点。所以在这个意义上说，这可能并不有效。 （但是，解析HTML是什么浏览器做的，而且真的很快）。
设置 innerHTML 确实使对您可能持有的目标元素中的元素的引用无效 - 因为这些元素不再存在，所以删除它们，然后放入新的元素（看起来非常相似）你设置 innerHTML 。
总之，如果你正在追加 d使用 appendChild （或 insertAdjacentHTML ，见下文）。如果要更换，则使用 innerHTML 是一个更好的选择，而不是通过DOM API自己创建树（速度是其中的首要任务）。
最后，值得一提的是， insertAdjacentHTML ，这是一个可以使用HTML字符串将节点和元素插入元素或元素旁边的函数。您可以附加到一个元素： theElement.insertAdjacentHTML（beforeend，HTML到这里）; 第一个参数是放置HTML的位置;你的选择是beforebegin（在元素之外，就在它的前面），afterbegin元素，开头），beforeend（在元素内，在结尾）和afterend （元素外，就在之后）。请注意，afterbegin和beforeend插入元素本身，而beforebegin 和afterend插入元素的父。所有主流桌面浏览器都支持，我不知道移动支持有多好（尽管我确信iOS Safari和Android 2.x至少有），但是垫片很小。
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!
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 (or 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 "afterbegin" and "beforeend" insert into the element itself, whereas "beforebegin" and "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.
这篇关于“innerHTML + = ...” vs“appendChild（txtNode）”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
