JavaScript DocumentFragment

DocumentFragment 接口用于存储文档结构的一个元素，它是 Document 接口的一种简化形式。然而，当前的 DOM 树不包含 DocumentFragment。如果您编辑文档片段，文档不会受到速度成本的影响。

DocumentFragment 的 appendChild() 或 insertBefore() 方法通常用于构建 DOM 节点并将它们添加到活动的 DOM 树中。

换句话说，在 DOM 子树中生成一个 DocumentFragment，然后使用 appendChild() 和 append() 等接口方法将该部分插入或添加到 DOM 中。片段的组件会被转移到 DOM 中，在其路径上留下一个空的 DocumentFragment。

语法

以下语法展示了 javascript DocumentFragment 及其接口的用法。

语法 1

DocumentFragment 的方法通常用于组合 DOM 节点并将它们添加到活动的 DOM 树中。您可以使用 DocumentFragment 函数来创建一个新的文档片段，如下所示：

语法 2

以下语法使用 Document 对象的 createDocumentFragment() 方法创建一个新方法。

工作原理

• 使用 querySelector() 方法按 ID 选择列表元素。
• 创建一个新的文档。
• 然后，创建一个列表项元素，将列表项的 innerHTML 设置为语言，并将每个新创建的列表项追加到文档片段中。
• 这个过程会对输入数组中的每个组件重复进行。
• 最后，将文本部分添加到列表元素中。

示例

以下示例展示了 DocumentFragment 函数使用多种方法的用法。

示例 1

以下示例展示了 DocumentFragment 函数使用基本方法的用法。

输出

图像显示了使用 DocumentFragment 方法的输出信息。

示例 2

以下示例展示了使用 DocumentFragment 函数的无序列表。

输出

图像显示了使用 DocumentFragment 方法的输出信息。

示例 3

以下示例展示了使用 append() 方法的 DocumentFragment 函数的用法。您可以在此处将 javascript append() 方法与无序列表一起使用。

输出

图像显示了使用 DocumentFragment 方法的输出信息。

示例 4

以下示例展示了使用基本方法的 createDocumentFragment 函数的用法。在这里，您将该方法与 document 函数一起使用来显示数组数据。

输出

图像显示了使用 DocumentFragment 方法的输出信息。

示例 5

以下示例展示了使用基本方法的 createDocumentFragment 函数的用法。在这里，您将多种类型的数据与 document 函数一起使用来显示数组数据。

输出

图像显示了使用 DocumentFragment 方法的输出信息。

结论

DocumentFragment 方法有助于创建列表和其他标签，并使用 javascript 方法显示数组数据。它帮助用户和开发人员管理数据数组。