我应该使用 document.createDocumentFragment 还是 document.createElement

Question

我正在 阅读有关文档片段 和 DOM 重排的内容，想知道 document.createDocumentFragment 与 document.createElement 有何不同，因为在我将它们附加到 DOM 元素之前，它们似乎都不存在于 DOM 中。

我做了一个测试（如下），所有这些都花费了完全相同的时间（大约 95 毫秒）。猜测这可能是由于没有样式应用于任何元素，所以可能没有重排。

无论如何，根据下面的示例，为什么我应该使用 createDocumentFragment 而不是 createElement 插入 DOM 时，两者之间有什么区别。

 var htmz = "<ul>";
for (var i = 0; i < 2001; i++) {
    htmz += '<li><a href="#">link ' + i + '</a></li>';
}
htmz += '<ul>';

//createDocumentFragment
console.time('first');
var div = document.createElement("div");
div.innerHTML = htmz;
var fragment = document.createDocumentFragment();
while (div.firstChild) {
    fragment.appendChild(div.firstChild);
}
$('#first').append(fragment);
console.timeEnd('first');

//createElement
console.time('second');
var span = document.createElement("span");
span.innerHTML = htmz;
$('#second').append(span);
console.timeEnd('second');

//jQuery
console.time('third');
$('#third').append(htmz);
console.timeEnd('third');

原文由 screenm0nkey 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

不同之处在于，当您将文档片段添加到 DOM 时，文档片段实际上会消失。发生的情况是，文档片段的所有子节点都插入到 DOM 中插入文档片段的位置，而文档片段本身并未插入。片段本身继续存在，但现在没有孩子。

这允许您同时将多个节点插入到 DOM 中：

 var frag = document.createDocumentFragment();
var textNode = frag.appendChild(document.createTextNode("Some text"));
var br = frag.appendChild(document.createElement("br"));
var body = document.body;
body.appendChild(frag);
alert(body.lastChild.tagName); // "BR"
alert(body.lastChild.previousSibling.data); // "Some text"
alert(frag.hasChildNodes()); // false

原文由 Tim Down 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

创建元素和文档片段之间的另一个非常重要的区别：

当您创建一个元素并将其附加到 DOM 时，该元素及其子元素将附加到 DOM。

对于文档片段，仅附加子项。

举个例子：

 var ul = document.getElementById("ul_test");

// First. add a document fragment:

(function() {
  var frag = document.createDocumentFragment();


  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Document Fragment"));
  frag.appendChild(li);

  ul.appendChild(frag);
  console.log(2);
}());

(function() {
  var div = document.createElement("div");


  var li = document.createElement("li");
  li.appendChild(document.createTextNode("Inside Div"));
   div.appendChild(li);

  ul.appendChild(div);
}());

 Sample List:
<ul id="ul_test"></ul>

导致此格式错误的 HTML（添加了空格）

 <ul id="ul_test">
  <li>Document Fragment</li>
  <div><li>Inside Div</li></div>
</ul>

原文由 Jeremy J Starcher 发布，翻译遵循 CC BY-SA 3.0 许可协议