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 |
