Question

这可能是一个非常愚蠢的问题，但是我似乎再次失去了一些基本知识。

我了解如何创建文档片段，在其中构建DOM子树并将其插入DOM；以及为什么这样做有用。

我不理解这与仅创建所需的父元素，在该元素中构建DOM子树，然后将其插入DOM之间的区别。

首先创建片段有什么好处？似乎已创建的元素在添加到DOM中之前几乎与片段相同，并且都发生在DOM之外。

谢谢。

Answer 1

通过片段，您可以创建在当前时间点没有父级的兄弟元素。

如本例所示，我们创建了两个范围，并使用片段将它们添加到已创建的div中，因此范围是直接子级。

const main = document.getElementById('main')

let frag = document.createDocumentFragment()

let span1 = document.createElement('span')
span1.textContent = 'hello'
frag.appendChild(span1)

let span2 = document.createElement('span')
span2.textContent = 'world'
frag.appendChild(span2)

main.appendChild(frag)

<div id="main">

</div>

结果如下：

<div id="main">
  <span>hello</span><span>world</span>
</div>

现在，如果我们创建父元素并执行相同的操作，则它们不再是主div的直接子代。

const main = document.getElementById('main')

let div = document.createElement('div')

let span1 = document.createElement('span')
span1.textContent = 'hello'
div.appendChild(span1)

let span2 = document.createElement('span')
span2.textContent = 'world'
div.appendChild(span2)

main.appendChild(div)

<div id="main">

</div>

使用父级时，您会得到如下所示的输出，您会看到现在有了一个额外的div：

<div id="main">
  <div>
    <span>hello</span><span>world</span>
  </div>
</div>

Answer 2

为了表演

因为所有节点都立即插入到文档中，所以仅触发一个重排和渲染，而不是如果分别插入每个插入的节点，则可能触发一个重排和渲染。

DocumentFragment来自MDN

文档片段和创建父元素之间有什么区别？

2 个答案: