文档:createDocumentFragment() 方法

Baseline 已广泛支持

此特性已相当成熟,可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来,各浏览器均已提供此特性。

创建一个新的、空的 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①

浏览器兼容性

另见