文件:createDocumentFragment() 方法

Baseline 已廣泛支援

此特性已相當成熟,可在許多裝置和瀏覽器版本上使用。自 ⁨2015 年 7 月⁩以來,各瀏覽器均已提供此特性。

建立一個新的、空的 DocumentFragment,您可以向其中新增 DOM 節點,以構建一個離屏 DOM 樹。

語法

js
createDocumentFragment()

引數

無。

返回值

一個新建立的、空的 DocumentFragment 物件,已準備好插入節點。

用法說明

DocumentFragment 是 DOM Node 物件,它們從不成為主 DOM 樹的一部分。常規的用法是建立文件片段,將元素追加到文件片段中,然後將文件片段追加到 DOM 樹中。在 DOM 樹中,文件片段會被其所有子節點所取代。

由於文件片段是在記憶體中的,並且不屬於主 DOM 樹,因此在一些舊的引擎中,使用文件片段可能會帶來更好的效能

您也可以使用 DocumentFragment 建構函式來建立一個新的片段。

js
const fragment = new DocumentFragment();

示例

此示例在 DocumentFragment 中建立了一個主要 Web 瀏覽器列表,然後將新的 DOM 子樹新增到文件中以供顯示。

HTML

html
<ul id="ul"></ul>

JavaScript

js
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

結果

規範

規範
DOM
# ref-for-dom-document-createdocumentfragment①

瀏覽器相容性

另見