Javascript 使用.appendChild（DocumentFragment）与.append（…[DomeElement，…]）比较

他们说：

由于所有节点都一次插入到文档中，因此只会触发一次回流和渲染，而不是单独插入每个节点时可能触发一次

所以

比

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.appendChild(el1);
document.body.appendChild(el2);

但是如何使用

追加

？

append

是否与使用documentFragment一样有效

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.append(el1,el2);

---

MDN文本有点不准确，单独添加元素不会影响渲染或回流的计数，这只在脚本执行后执行一次。“潜在”是关键字，因为如果要从附件中读取DOM中的一些值，则可以在脚本执行的中间触发回流计算。

documentFragment

的优点是，您可以创建通常无法在其他元素中创建的元素片段。例如，您可以创建一组

tr

s，然后将它们附加到一个表中。我不理解您的评论要点，您不需要使用.append方法谈论差异。然而，关于您的示例，请使用表<代码>[document.createElement（'tr'），document.createElement（'tr'）].forEach（tr=>{document.querySelector（'tbl'）.appendChild（tr）；}）但这不是这个问题的重点。问题是，包装器元素、documentFragment或使用

append

（在某些情况下，HTMLTableElement可能是一个例外）.@Teemu您的确认的来源/参考是什么？向您展示，直接向DOM追加元素并不比追加片段慢。如果您将注释行切换到11/12，您将检测到追加到DOM时的大量性能问题。在操作期间从DOM读取特定值会导致重新计算布局。一个无父片段不会遇到这个问题，但是它给出了一些不正确的值（在附加到包装器元素时也是如此）。单独附加元素可能会破坏性能，但不能使用片段。

const el1 = document.createElement('div');
const el2 = document.createElement('div');
document.body.append(el1,el2);