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.

建立新的 DocumentFragment.

語法

var fragment = document.createDocumentFragment();

fragmentDocumentFragment 的一個參考物件。

描述

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
# ref-for-dom-document-createdocumentfragment①

瀏覽器相容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
createDocumentFragment

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support

更多參考