建立新的 DocumentFragment
.
語法
var fragment = document.createDocumentFragment();
fragment
是 DocumentFragment
的一個參考物件。
描述
DocumentFragment
s 是 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) | ? | ? | ? |