Javascript 文档片段VS创建的未附加div

使用文档片段或未附加的创建div来避免对DOM的多次点击之间有区别吗

假设我们将生成100个列表项

本页内容：

 <ul class="list"></ul>

场景1：文档片段

在这个场景中，我们创建li，用一些简单的文本填充它，然后将它附加到片段中。循环完成后，片段将附加到列表中。我们避免ping dom100x，而只ping一次以附加片段

var frag = document.createDocumentFragment();
for(var i = 1; i <= 100; i++) {
  var li = document.createElement('li');
  li.textContent = 'Item #' + i;
  frag.append(li);
}

document.querySelector('.list').appendChild(frag);

var frag=document.createDocumentFragment（）；
对于（var i=1；i第二个示例不起作用。

函数
appendChild
必须接受对象，但
div.innerHTML
返回字符串

你能做的是：

document.querySelector('.list').appendChild(div);

但这也会插入div。这就是为什么片段存在的原因，它能够一次插入多个元素，而不需要包装器元素，包装器元素可能会破坏html结构

您也可以这样做：

document.querySelector('.list').innerHTML = div.innerHTML;

但是varibale
li
不再引用DOM中的
li
元素。DOM中的元素是从
div.innerHTML
字符串创建的新元素

例如，如果您将一些事件侦听器添加到元素中，它们将不再工作。
感谢您的提醒。我编辑了代码，以反映第二个场景现在正在工作。不过，我很好奇这两个场景的区别。就连li上的侦听器而言，您也可以在场景2运行后附加它们，或者，在将事件委派和侦听器放在正文之前。我认为这更多是个人偏好。您可以使用自己喜欢的内容。在第二种情况下，您可以轻松覆盖
.list
元素的内容。而在第一种情况下，您只需向其添加更多元素。您还可以使用
innerHTML+=div.innerHTML
添加而不是替换。但是如果元素上直接存在任何事件，而没有委派，它们将停止工作。如果您想知道性能，为什么不像以前那样创建一个JSPerf？
document.querySelector('.list').innerHTML = div.innerHTML;