javascript - "innerHTML += ..."与 "appendChild(txtNode)"

Question

问题是，比较使用innerHTML 的串联和将文本节点附加到现有节点。幕后发生了什么？

到目前为止我对此的想法:

• 我猜两者都会造成“回流”。
• 据我所知，后者(附加文本节点)也会导致 DOM 的完全重建(正确吗？他们都这样做吗？)。
• 前者似乎还有一些其他令人讨厌的副作用，比如导致之前保存的对我正在修改innerHTML的节点的子节点的引用，不再指向“当前DOM”/“子节点的正确版本” 。相反，当附加子项时，引用似乎保持不变。这是为什么？

希望你们能帮我解决这个问题，谢谢!

Answer 1

后者(appendChild)不会导致 DOM 甚至目标内所有元素/节点的完全重建。

前者(设置innerHTML)确实会导致目标元素内容的完全重建，如果您要附加，则不需要这样做。

通过 innerHTML += content 附加，使浏览器运行元素中的所有节点，构建 HTML 字符串以提供给 JavaScript 层。然后，您的代码将文本附加到其中并设置 innerHTML，从而导致浏览器删除目标中的所有旧节点，重新解析所有 HTML，并构建新节点。所以从这个意义上说，它可能效率不高。 (但是，解析 HTML 是浏览器所做的，而且它们的速度真的非常快。)

设置 innerHTML 确实会使您可能持有的目标元素中的任何元素引用无效 - 因为这些元素不再存在，您删除了它们，然后放入了新的元素(看起来非常相似)当您设置 innerHTML 时。

简而言之，如果您追加，我会使用appendChild(或insertAdjacentHTML，见下文)。如果您要进行替换，在某些非常有效的情况下，使用 innerHTML 是比通过 DOM API 自己创建树更好的选择(其中速度是首要因素)。

最后，值得一提的是其他几个替代方案:

• append是 DOM 中相对较新的添加(但除了真正过时的浏览器之外还有 excellent support)。它将一项或多项附加到元素，其中项可以是节点、元素或定义节点和元素的 HTML 字符串。与 appendChild 不同，它支持 HTML 字符串和节点，并且还支持多个参数。对于您的用例，它比此列表中的下一个选项更方便:parent.append(htmlString)。
• insertAdjacentHTML将您作为 HTML 字符串提供的节点和元素插入到元素中或元素旁边。您可以使用它附加到元素: theElement.insertAdjacentHTML("beforeend", "the HTML comes here"); 第一个参数是放置 HTML 的位置；你的选择是:
  • "beforebegin"(在元素之外，就在它的前面)
  • “afterbegin”(元素内部，开头)
  • “beforeend”(元素内部，末尾)
  • "afterend" (在元素之外，就在元素之后)请注意，"afterbegin" 和 "beforeend" 插入元素本身，而 "beforebegin" 和 "afterend" > 插入到元素的父元素中。浏览器支持是 basically universal .
• insertAdjacentText就像 insertAdjacentHTML 一样，只不过它插入一个文本节点(文本不被视为 HTML)。浏览器支持是 basically universal .