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

浏览器兼容性

Feature Firefox (Gecko) Chrome Internet Explorer Opera Safari
Basic support (Yes) (Yes) (Yes) (Yes) (Yes)
Feature Firefox Mobile (Gecko) Android IE Mobile Opera Mobile Safari Mobile
Basic support ? ? ? ? ?

标准

另见

文档标签和贡献者

标签: 
 此页面的贡献者: mike-j, charlie
 最后编辑者: mike-j,