Document.createDocumentFragment()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

io error: No such file or directory (os error 2) (/home/runner/work/yari/yari/mdn/translated-content/files/zh-tw/web/api/document/index.md)

建立新的 DocumentFragment.

語法

var fragment = document.createDocumentFragment();

fragment 是 DocumentFragment 的一個參考物件。

描述

DocumentFragments 是 DOM 節點(Nodes)。他們不會成為 DOM 主幹的一部份。最常見的作法是先建立文本片段 (document fragment)，然後將元素 (element) 加入文本片段中，最後再將文本片段加入 DOM 樹中。在 DOM 樹中，文本片段將會被他所有的子元素取代。

正因為文本片段是存在記憶體中，並且不是 DOM 主幹的一部分，增加子元素並不會導致網頁重刷（重新計算元素的位置和幾何）。因此採用文本片段通常會有比較好的效能表現。

舉例

這個例子中用清單來呈現主流瀏覽器。

HTML

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

JavaScript

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

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

element.appendChild(fragment);

結果

在 jsfiddle 上看範例結果。

規格

Specification
DOM Standard
# ref-for-dom-document-createdocumentfragment①

瀏覽器相容性

BCD tables only load in the browser

更多參考