HTML DOM Document createDocumentFragment()
示例
向空列表添加元素
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);
自己动手试一试 »
向现有列表添加元素
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);
自己动手试一试 »
描述
createDocumentFragment() 方法创建一个屏幕外节点。
屏幕外节点可用于构建新的文档片段，该片段可插入到任何文档中。
createDocumentFragment() 方法还可用于提取文档的某些部分，更改、添加或删除部分内容，然后将其重新插入到文档中。
注意
您可以直接编辑 HTML 元素。但更好的方法是构建一个（屏幕外）文档片段，并在准备好后将此片段附加到实际的（活动）DOM。因为您在片段准备好后才插入，所以只会有一个重排和一次渲染。
如果您想在循环中追加 HTML 元素，使用文档片段还可以提高性能。
警告！
附加到文档片段的文档节点将从原始文档中移除。
语法
document.createDocumentFragment()
参数
| 无 |
返回值
| 类型 | 描述 |
| 节点 | 创建的 DocumentFragment 节点。 |
浏览器支持
document.createComment() 是 DOM Level 1 (1998) 功能。
所有浏览器都完全支持。
| Chrome | Edge | Firefox | Safari | Opera | IE |
| 是 | 是 | 是 | 是 | 是 | 9-11 |
