Javascript 我是否需要使用documentFragment插入UL列表

建议使用

documentFragment

将元素插入DOM。假设我想创建一个

ul

列表并将其插入DOM，那么我将执行以下操作：

var ul = document.createElement('ul');
var li = document.createElement('li');
ul.appendChild(li);
document.body.appendChild(ul);

---

为什么我需要在这里使用

documentFragment

？

您不需要，不，您可以直接插入DOM。文档片段对于构建没有单个根的结构、复制和粘贴操作以及非DOM操作非常有用，但您不需要一个文档片段来附加到DOM。

文档片段继承Node的方法并实现ParentNode接口的方法

您可以简单地执行以下操作：

var fragment = new DocumentFragment();
var a = document.createElement('p');
fragment.appendChild(a);

---

我想这要视情况而定。当您只需要插入一组

节点

s一次时，直接附加它们是非常好的。在您的问题中，

ul

和

li

都是在内存中创建和操作的，然后插入到DOM中。所以根本不需要使用

DocumentFragment

。但是，例如，如果您需要基于集合模型在DOM中的

ul

中插入多个

li

s，我建议您使用

DocumentFragment

一次性插入

li

s，而不是每次追加一个

li

。这是因为操作DOM非常昂贵，使用

DocumentFragment

可以减少对

DOM

的操作并加快

DOM

。请参见下面的差异

var data = [1, 2, 3, 4], ul = document.getElementById('#ul')

// solution 1
for (var i = 0, length = data.length; i < length; i++) {
    var li = document.createElement('li')
    li.innerText = data[i]
    ul.appendChild(li)
}

// solution 2
var fragment = document.createDocumentFragment()
for (var i = 0, length = data.length; i < length; i++) {
    var li = document.createElement('li')
    li.innerText = data[i]
    fragment.appendChild(li)
}
ul.appendChild(fragment)

var data=[1,2,3,4]，ul=document.getElementById（“#ul”）
//解决方案1
对于（变量i=0，长度=data.length；i

---

解决方案1在每次迭代中创建

li

，并将新创建的

li

附加到

ul

中。所以总共有4次DOM操作。解决方案2只是创建

li

，并在每次迭代中将其附加到片段中。它只在循环后操作DOM，将片段附加到

ul

中。解决方案2中只有一个DOM操作。显然，在本例中，解决方案2是一个更好的选择。

“建议使用

documentFragment

…”在哪里？谁的？在什么情况下？有什么支持信息？谢谢，我就是这么想的。这里有一点我不明白：对于复制和粘贴操作，以及非DOM操作，您能提供一些简单的例子吗？它是否与DOM之外具有单个根的元素相关？@Maximus：简单地说，假设您正在使用DOM编写文档编辑器。用户选择六个单独的段落并点击复制。你需要一个地方来存放这六段文字。DocumentFragment是一个轻量级的放置它们的地方；否则，您必须创建一个元素，它们可能都是其子元素，然后记住以后只粘贴该元素的子元素（而不是元素本身）。但是当您附加DocumentFragment时，自动附加的只是子对象。另一方面，如果你想加载一些HTML并在其中找到一些内容，但不想在文档中找到这些内容。谢谢，这一点仍然不清楚：另一方面，如果你想加载一些HTML并在其中找到一些内容，但不想在文档中找到这些内容。-你能详细说明一下吗？为什么不在答案中添加示例情况，我认为用户会受益。目前，web上没有太多DocumentFragment的使用示例