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

Question

这可能是一个非常愚蠢的问题，但我似乎再次错过了一些基本的要点。

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

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

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

谢谢。

Answer 1

片段允许您创建在当前时间点没有父级的同级元素。

正如您在本示例中看到的，我们创建了两个 Span，并使用片段将它们添加到已创建的 div 中，因此这两个 Span 是直接子级。

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>