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 goes here"); 第一个参数是放置 HTML 的位置；你的选择是:
  • “beforebegin”(在元素之外，就在它前面)
  • "afterbegin"(元素内部，开头)
  • “beforeend”(元素内部，末尾)
  • "afterend"(在元素之外，就在元素之后)请注意，"afterbegin" 和 "beforeend" 插入元素本身，而 "beforebegin" 和 "afterend" 插入元素的父级。浏览器支持是 basically universal .
• insertAdjacentText就像 insertAdjacentHTML 一样，只是它插入了一个文本节点(文本不被视为 HTML)。浏览器支持是 basically universal .