“innerHTML + = …”vs“appendChild（txtNode）”
问题是，使用innerHTML比较concatination并将文本节点附加到现有节点。 现场发生了什么？
我到目前为止的想法：
- 我猜这两个都在造成“ReFlow”。
- 后者（追加一个文本节点），据我所知，也导致了一个完整的DOM重build（正确的？他们都这样做？）。
- 前者似乎有一些其他的讨厌的副作用，如导致以前保存的引用到我正在修改innerHTML的节点的子节点，不再指向“当前的DOM”/“正确版本的子节点”。 相反，在追加儿童时，引用似乎保持不变。 为什么是这样？
我希望你们能为我解决这个问题，谢谢！
后者（ appendChild ）不会导致完全重buildDOM，甚至不会导致目标中的所有元素/节点。
前者（设置innerHTML ）确实会导致目标元素内容的完整重build，如果您正在追加，则不需要。
通过innerHTML += content追加使浏览器遍历元素中的所有节点，构buildHTMLstring以提供给JavaScript层。 您的代码然后将文本附加到它并设置innerHTML ，导致浏览器删除目标中的所有旧节点，重新parsing所有的HTML，并build立新的节点。 所以从这个意义上讲，这可能不是有效的。 （然而，parsingHTML是浏览器所做的事情 ，而且真的很快。）
设置innerHTML的确会使对你可能持有的目标元素中的元素的任何引用无效 – 因为这些元素不再存在，所以当你设置innerHTML时，你删除了它们，然后放入新的元素（看起来非常相似）。
总之，如果你追加 ，我会使用appendChild （或insertAdjacentHTML ，见下文）。 如果你正在更换，有一些非常有效的情况，使用innerHTML比通过DOM API（速度是其中的主要部分）自己创build树更好。
最后，值得一提的是insertAdjacentHTML ，它是一个函数，可以使用HTMLstring将节点和元素插入到元素中或元素旁边。 你可以附加到一个元素： theElement.insertAdjacentHTML("beforeend", "the HTML goes here"); 第一个参数是放置HTML的地方; （在元素之外，在它之前）， "afterbegin" （元素内部，开始处）， "beforeend" （元素内部，最后）和"afterend" （外部）元素，就在它之后）。 请注意， "afterbegin"和"beforeend"插入元素本身，而"beforebegin"和"afterend"插入元素的父项 。 在所有主stream桌面浏览器的支持下，我不知道移动支持有多好（尽pipe我确信至lessiOS Safari和Android 2.x都有这个function），但是垫片很小。
我用innerHTML和appendChild之间的性能比较创build了一个小小的要点。
最后一个胜出
