HTML DOM Document createDocumentFragment() 方法

定义和用法

createDocumentFragment() 方法创建 offscreen 节点。

offscreen 节点可用于构建可插入任何文档的新文档片段。

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

提示

您始终可以直接编辑 HTML 元素。但更好的方法是构建（offscreen）文档片段，并在准备好时将此片段追加到真实（活动）的 DOM。因为您是在准备好片段后插入片段，所以将只需一次重排和一次渲染。

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

注意：被追加到文档片段的文档节点将从原始文档中删除。

实例

例子 1

将元素添加到空列表：

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

// 创建文档片段：
const dFrag = document.createDocumentFragment();

// 将 li 元素添加到片段中：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}

// 将片段添加到列表中：
document.getElementById('myList').appendChild(dFrag);

亲自试一试

例子 2

将元素添加到现有列表：

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

// 创建文档片段：
const dFrag = document.createDocumentFragment();

// 将 li 元素添加到片段中：
for (let x in fruits) {
  const li = document.createElement('li');
  li.textContent = fruits[x];
  dFrag.appendChild(li);
}

// 将片段添加到列表中：
document.getElementById('myList').appendChild(dFrag);

亲自试一试

语法

document.createDocumentFragment()

参数

无。

返回值

类型 描述
节点 新创建的 DocumentFragment 节点，无子节点。

浏览器支持

document.createComment() 是 DOM Level 1 (1998) 特性。

所有浏览器都支持它：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
支持 9-11 支持 支持 支持 支持