HTML DOM 文档 createDocumentFragment()

示例

将元素添加到空列表：

const fruits = ["Banana", "Orange", "Mango"];

// Create a document fragment:
const dFrag = document.createDocumentFragment();

// Add li elements to the fragment:
for (let x in fruits) {
const li = document.createElement('li');
li.textContent = fruits[x];
dFrag.appendChild(li);
}

// Add fragment to a list:
document.getElementById('myList').appendChild(dFrag);

亲自试一试 »

将元素添加到现有列表：

亲自试一试 »

描述

这个createDocumentFragment()方法创建一个离屏节点。

屏幕外节点可用于构建可插入到任何文档中的新文档片段。

这个createDocumentFragment()方法还可以用于提取文档的部分内容，更改、添加或删除部分内容，并将其插入回文档中。

笔记

您始终可以直接编辑 HTML 元素。但更好的方法是构造一个（屏幕外）文档片段，并在准备好时将此片段附加到真实（活动）DOM。因为您在准备好片段时插入片段，所以只会有一次回流和一次渲染。

如果您想在循环中附加 HTML 元素项，使用文档片段也可以提高性能。

警告！

附加到文档片段的文档节点将从原始文档中删除。

语法

document.createDocumentFragment()

参数

没有任何

返回值

类型	描述
节点	创建的DocumentFragment节点。

浏览器支持

document.createComment()是 DOM Level 1 (1998) 功能。

所有浏览器都完全支持它：


Chrome	Edge	Firefox	Safari	Opera	IE
Yes	Yes	Yes	Yes	Yes	9-11