--- title: Document.createDocumentFragment() slug: Web/API/Document/createDocumentFragment tags: - API - DOM - 參考 - 文本片段 - 方法 translation_of: Web/API/Document/createDocumentFragment ---
{{ApiRef("DOM")}}

建立新的 {{domxref("DocumentFragment")}}.

語法

var fragment = document.createDocumentFragment();

fragment 是 {{domxref("DocumentFragment")}} 的一個參考物件。

描述

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

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

舉例

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

HTML

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

JavaScript

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 上看範例結果。

規格

規格 狀態 註解
{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}} {{Spec2('DOM WHATWG')}} Initial definition in the DOM 1 specification.

瀏覽器相容性

{{Compat("api.Document.createDocumentFragment")}}

更多參考