HTML - DOM 文档 createDocumentFragment() 方法

createDocumentFragment() 方法创建一个新的空文档片段，该片段驻留在内存中。它就像一个空容器，在插入 HTML 文档之前保存 DOM 元素。

元素附加到新创建的文档片段中，然后将此文档片段附加到 DOM 树，其中文档片段被其所有子元素替换。它有助于通过添加、删除或修改节点来更改文档的内容。

语法

document.createDocumentFragment();

参数

此方法不接受任何参数。

返回值

它返回创建的文档片段节点。

HTML DOM 文档“createDocumentFragment()”方法示例

以下示例说明了如何使用 createDocumentFragment 方法添加和修改列表中的现有元素。

向空列表添加元素

在以下示例中，我们将使用 create createDocumentFragment() 方法向空列表中添加一个元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document createDocumentx() Method
    </title>
</head>
<body>
    <h3>HTML DOM Document createDocumentFragment() Method</h3>
    <ul id="list"></ul>
    <script>
        let list = document.getElementById('list');
        let x = document.createDocumentFragment();
        let cars = ["Tata", "BMW", "Audi"];
        for(const i of cars){
            let item=document.createElement("li");
            item.textContent=i;
            x.appendChild(item);
        }
        list.appendChild(x);
    </script>
</body>
</html>

修改现有列表

在以下示例中，我们将使用 createDocumentFragment() 方法修改现有列表。

<!DOCTYPE html>
<html lang="en">
<head>
    <title>
        HTML DOM Document createDocumentFragment() Method
    </title>
</head>
<body>
    <h3>HTML DOM Document createDocumentFragment() Method</h3>
    <button onclick="fun()">Click me</button>
    <ul>
        <li>BMW</li>
        <li>Tesla</li>
        <li>Audi</li>
        <li>Mahindra</li>
        <li>Honda</li>
    </ul>
    <script>
       function fun() {
          let x= document.createDocumentFragment();
          x.appendChild(document.getElementsByTagName("li")[0]);
          x.childNodes[0].childNodes[0].nodeValue ="Tata";
          document.getElementsByTagName("ul")[0].appendChild(x);
        }
    </script>
</body>
</html>

支持的浏览器

方法
createDocumentFragment()	是 1	是 12	是 1	是 1	是 12.1

html_dom_document_reference.htm

打印页面