From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001
From: Peter Bengtsson <mail@peterbe.com>
Date: Tue, 8 Dec 2020 14:40:17 -0500
Subject: initial commit

---
 .../api/document/createdocumentfragment/index.html | 91 ++++++++++++++++++++++
 1 file changed, 91 insertions(+)
 create mode 100644 files/zh-cn/web/api/document/createdocumentfragment/index.html

(limited to 'files/zh-cn/web/api/document/createdocumentfragment')

diff --git a/files/zh-cn/web/api/document/createdocumentfragment/index.html b/files/zh-cn/web/api/document/createdocumentfragment/index.html
new file mode 100644
index 0000000000..45f552bff4
--- /dev/null
+++ b/files/zh-cn/web/api/document/createdocumentfragment/index.html
@@ -0,0 +1,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>
-- 
cgit v1.2.3-54-g00ecf