建立新的 DocumentFragment.

語法

var fragment = document.createDocumentFragment();

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

規格

規格 狀態 註解
DOM
The definition of 'Document.createDocumentFragment()' in that specification.
Living Standard Initial definition in the DOM 1 specification.

瀏覽器相容性

  
特色 Firefox (Gecko) Chrome Edge Internet Explorer Opera Safari
基礎支援 (Yes) (Yes) (Yes) (Yes) (Yes) (Yes)
  
特色 Firefox Mobile (Gecko) Android Edge IE Mobile Opera Mobile Safari Mobile
基礎支援 ? ? (Yes) ? ? ?

更多參考

文件標籤與貢獻者

 此頁面的貢獻者: tigercosmos
 最近更新: tigercosmos,