“innerHTML += ...";vs “appendChild(txtNode)" [英] "innerHTML += ..." vs "appendChild(txtNode)"

问题描述

问题是，使用innerHTML 比较连接并将文本节点附加到现有节点.幕后发生了什么?

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:

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

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

I'm hoping you people can clear this up for me, thanks!

推荐答案

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

The latter (appendChild) does not cause a complete rebuild of the DOM or even all of the elements/nodes within the target.

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

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 使浏览器遍历元素中的所有节点，构建一个 HTML 字符串以提供给 JavaScript 层.然后您的代码将文本附加到它并设置 innerHTML，导致浏览器删除目标中的所有旧节点，重新解析所有这些 HTML，并构建新节点.所以从这个意义上说，它可能效率不高.(但是，解析 HTML 是浏览器所做的，而且它们真的非常非常快.)

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.)

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

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.

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

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).

最后，值得一提的是insertAdjacentHTML，这是一个函数，您可以使用该函数将节点和元素插入到使用 HTML 字符串的元素中或元素旁边.你可以用它附加到一个元素: theElement.insertAdjacentHTML("beforeend", "the HTML go here"); 第一个参数是放置 HTML 的位置；你的选择是 "beforebegin"(元素外，就在它前面)，"afterbegin"(元素内，在开头)，"beforeend"(在元素内部，在最后)和 "afterend"(在元素外部，就在它之后).注意 "afterbegin" 和 "beforeend" 插入元素本身，而 "beforebegin" 和 "afterend"> 插入元素的父.所有主要桌面浏览器都支持，我不知道移动支持有多好(尽管我确定 iOS Safari 和 Android 2.x 及更高版本至少有它)，但是 垫片很小.

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屋！