We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

建立新的 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.

瀏覽器相容性

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

  
特色 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,