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

列印頁面