Document.createDocumentFragment()
建立新的 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! (en-US)
| 特色 | 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) | ? | ? | ? |