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 支持 支持 支持 支持