files/zh-cn/web/api/document/createdocumentfragment/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91

---
title: Document.createDocumentFragment()
slug: Web/API/Document/createDocumentFragment
tags:
  - API
  - DOM
  - Document
  - Method
  - Reference
translation_of: Web/API/Document/createDocumentFragment
---
<div>{{ ApiRef("DOM") }}</div>

<div> </div>

<p>创建一个新的空白的文档片段( <a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragment"><code>DocumentFragment</code></a>)。</p>

<h2 id="Syntax" name="Syntax">语法</h2>

<pre class="syntaxbox">let fragment = document.createDocumentFragment();
</pre>

<p><code>fragment</code> 是一个指向空{{domxref("DocumentFragment")}}对象的引用。</p>

<h2 id="描述">描述</h2>

<p><code><a href="/en-US/docs/DOM/DocumentFragment" title="DOM/DocumentFragments">DocumentFragments</a></code> 是DOM节点。它们不是主DOM树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到DOM树。在DOM树中，文档片段被其所有的子元素所代替。</p>

<p>因为文档片段存在于<strong>内存中</strong>，并不在DOM树中，所以将子元素插入到文档片段时不会引起页面<a href="/zh-CN/docs/Glossary/Reflow">回流</a>（对元素位置和几何上的计算）。因此，使用文档片段通常会带来更好的性能<span style="line-height: 1.5;">。</span></p>

<h2 id="Example" name="Example">示例</h2>

<p>此示例创建主流Web浏览器的列表。</p>

<h3 id="HTML">HTML</h3>

<pre class="brush: html">&lt;ul id="ul"&gt;
&lt;/ul&gt;</pre>

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">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);</pre>

<h3 id="结果">结果</h3>

<p>{{EmbedLiveSample("Example", 600, 140)}}</p>

<h2 id="规范">规范</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM WHATWG', '#dom-document-createdocumentfragment', 'Document.createDocumentFragment()')}}</td>
   <td>{{Spec2('DOM WHATWG')}}</td>
   <td>Initial definition in the DOM 1 specification.</td>
  </tr>
 </tbody>
</table>

<h2 id="浏览器兼容">浏览器兼容</h2>

<div class="hidden">
<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> and send us a pull request.</p>
</div>

<p>{{Compat("api.Document.createDocumentFragment")}}</p>

<h2 id="See_also" name="See_also">另见</h2>

<ul>
 <li>{{domxref("DOMImplementation.createDocument", "document.implementation.createDocument()")}}</li>
 <li>{{domxref("documentFragment")}}</li>
</ul>