Document: createDocumentFragment() 方法

创建一个新的空 DocumentFragment，可以在其中添加 DOM 节点以构建屏幕外的 DOM 树。

语法

js
createDocumentFragment()

参数

无。

返回值

一个新创建的空 DocumentFragment 对象，已准备好插入节点。

使用说明

DocumentFragment 是 DOM Node 对象，永远不会成为主 DOM 树的一部分。通常的用例是创建文档片段，将元素附加到文档片段，然后将文档片段附加到 DOM 树。在 DOM 树中，文档片段将被其所有子节点替换。

由于文档片段位于内存中并且不是主 DOM 树的一部分，因此在某些旧引擎中，使用文档片段可能会带来更好的性能。

您还可以使用 DocumentFragment 构造函数创建新的片段

js
const fragment = new DocumentFragment();

示例

此示例在 DocumentFragment 中创建主要 Web 浏览器的列表，然后将新的 DOM 子树添加到文档中以显示。

HTML

html
<ul id="ul"></ul>

JavaScript

js
const element = document.getElementById("ul"); // assuming ul exists
const fragment = document.createDocumentFragment();
const browsers = ["Firefox", "Chrome", "Opera", "Safari"];

browsers.forEach((browser) => {
  const li = document.createElement("li");
  li.textContent = browser;
  fragment.appendChild(li);
});

element.appendChild(fragment);

结果

规范

规范
DOM 标准
# ref-for-dom-document-createdocumentfragment①

浏览器兼容性

BCD 表格仅在启用了 JavaScript 的浏览器中加载。

另请参阅