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