文档片段 VS 创建未附加 div

Question

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

假设我们要生成 100 个列表项...

我们页面的内容：

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

场景一：文档片段

在这种情况下，我们创建 li，用一些简单的文本填充它，然后将它附加到片段。循环完成后，该片段将附加到列表中。我们避免对 DOM 100x 执行 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);

场景二：未追加div

在这种情况下，我们创建了一个 div， 的行为 类似于文档片段，因为它不在 DOM 中。我们将所有创建的 li 附加到 div，然后最后将 div 的内容附加到 DOM.

中的列表

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

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

这两种情况有什么区别？至于避免多次 ping DOM，似乎两者都达到相同的结果。

Answer 1

第二个示例不起作用。
函数 appendChild 必须接受一个对象，但 div.innerHTML return 必须接受一个字符串。

你能做的是：

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

但这也会插入 div。这就是该片段存在的原因，以便能够一次插入多个元素，而不会破坏您的 html 结构的包装元素。

您也可以这样做：

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

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

例如，如果您向元素添加了一些事件侦听器，它们将不再起作用。

文档片段 VS 创建未附加 div

Document fragment VS created un-appended div

javascript

performance

dom

documentfragment