Document.createDocumentFragment()

创建一个新的空的文档片段 DocumentFragment。

语法

var docFragment = document.createDocumentFragment();

docFragment 是一个对空文档片段 DocumentFragment 对象的引用。

描述

DocumentFragments 是一些DOM节点。它们不是DOM树的一部分。通常的使用场景是创建一个文档片段，然后将创建的DOM元素插入到文档片段中，最后把文档片段插入到DOM树中。在DOM树中，文档片段会被替换为它所有的子元素。

因为文档片段存在与内存中，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面回流(reflow)(对元素位置和几何上的计算)。因此，使用文档片段document fragments 通常会起到优化性能的作用(better performance)。

documentFragment 被所有主流浏览器支持，甚至是IE 6。所以，没有理由不用。

例子

var ul = document.getElementsByTagName("ul")[0]; // assuming it exists
var docfrag = document.createDocumentFragment();
var browserList = ["Internet Explorer", "Mozilla Firefox", "Safari", "Chrome", "Opera"];

browserList.forEach(function(e) {
  var li = document.createElement("li");
  li.textContent = e;
  docfrag.appendChild(li);
});

ul.appendChild(docfrag);
// a list with well-known web browsers

浏览器兼容性

标准

• DOM Level 2: createDocumentFragment
• DOM Level 3: createDocumentFragment

另见

• document.implementation.createDocument()
• documentFragment