JavaScript DocumentFragment接口

使用DocumentFragment接口可以存储文档结构的元素，这是Document接口的简化形式。然而，当前的DOM树不包含DocumentFragment。如果你编辑了文档片段，对文档的速度开销没有影响。

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

换句话说，生成一个DOM子树内的DocumentFragment，然后使用像appendChild()和append()这样的接口方法将其部分插入或附加到DOM中。组成DocumentFragment的组件被传送到DOM中，形成一个空的DocumentFragment。

语法

以下是使用javascript DocumentFragment及其接口的语法示例。

语法1

通常使用DocumentFragment的方法来组成DOM节点，并将其附加或插入到活动的DOM树中。您可以像下面这样使用DocumentFragment函数来创建一个新的文档片段：

let fragment_variable = new DocumentFragment();

语法2

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

let fragment_variable = document.createDocumentFragment();

操作方式：

使用querySelector()方法选取具有指定id的列表元素。
创建一个新文档。
然后，创建一个列表项元素，将列表项的innerHTML设置为语言，并将每个新创建的列表项添加到文档片段中。
对于输入数组中的每个组件，重复以上步骤。
最后，将文本部分添加到列表元素中。

示例

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

示例1：

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

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Interface or Method </h3>
<p> The appendChild() or insertBefore() methods of the DocumentFragment are typically used to build DOM nodes and add or insert them to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['JavaScript', 'TypeScript', 'NodeJs', 'Jquery','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
    let li_var = document.createElement('li');
    li_var.innerHTML = language;
    fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>

输出

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

JavaScript DocumentFragment接口

示例2：

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

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Interface or Method </h3>
<p> The appendChild() or insertBefore() methods of the DocumentFragment are typically used to build DOM nodes and add or insert them to the active DOM tree. </p>
<ol id = "language_data"></ol>
<script>
let languages_var = ['JavaScript', 'TypeScript', 'NodeJs', 'Jquery','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
    let li_var = document.createElement('li');
    li_var.innerHTML = language;
    fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>

输出

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

JavaScript DocumentFragment接口

示例3：

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

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript DocumentFragment() Using the append() Method </h3>
<p> The append() method of the DocumentFragment is used to build DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['Java', 'TypeScript', 'PHP', 'Perl','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = new DocumentFragment();
languages_var.forEach((language) => {
    let li_var = document.createElement('li');
    li_var.innerHTML = language;
    fragment_variable.append(li_var);
})
lang_data.append(fragment_variable);
</script>
</body>
</html>

输出

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

JavaScript DocumentFragment接口

示例4：

下面的示例展示了使用基本方法操作createDocumentFragment函数的情况。在这里，您使用该方法与document函数一起显示数组数据。

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript cretaeDocumentFragment() Interface or Method </h3>
<p> The createDocumentFragment is typically used to build and add or insert DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<script>
let languages_var = ['Jquery', 'JavaScript', 'TypeScript', 'NodeJs','AngularJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = document.createDocumentFragment();
languages_var.forEach((language) => {
    let li_var = document.createElement('li');
    li_var.innerHTML = language;
    fragment_variable.appendChild(li_var);
})
lang_data.appendChild(fragment_variable);
</script>
</body>
</html>

输出

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

JavaScript DocumentFragment接口

示例5：

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

<!DOCTYPE html>
<html>
<head>
<title> JavaScript DocumentFragment() Interface or Method </title>
</head>
<body>
<h3> JavaScript cretaeDocumentFragment() Interface or Method </h3>
<p> The createDocumentFragment is typically used to build and add or insert DOM nodes to the active DOM tree. </p>
<ul id = "language_data"></ul>
<button onclick = "click_here();"> Click Here </button>
<script>
function click_here(){
let languages_var = ['1', 'AngularJs', '0.11', 'TypeScript', 'NodeJs'];
let lang_data = document.querySelector('#language_data')
let fragment_variable = document.createDocumentFragment();
languages_var.forEach((language) => {
    let li_var = document.createElement('li');
    li_var.innerHTML = language;
    fragment_variable.append(li_var);
})
lang_data.append(fragment_variable);
}
</script>
</body>
</html>

输出

该图片展示了使用DocumentFragment方法的输出信息。

JavaScript DocumentFragment接口