HTML DOM createDocumentFragment()用法及代碼示例

HTML DOM createDocumentFragment() 方法用於創建文檔片段。文檔片段不會影響 DOM 結構，因為它駐留在內存中。當我們將文檔片段附加到 DOM 時，它本質上被它的子元素替換，即沒有附加到文檔的文檔片段，隻有它的子元素被附加。

用法

以下是 createDocumentFragment() 方法的語法 -

document.createDocumentFragment()

它返回一個 DocumentFragment 對象，代表 documentFragment 節點。

示例

讓我們看一個 HTML DOM createDocumentFragment() 方法的例子 -

<!DOCTYPE html>
<html>
<body>
<h1>createDocumentFragment() example</h1>
<p>Click the below button to change list items using the createDocumentFragment method.</p>
<button type="button" onclick="changeList()">CHANGE</button>
<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava<li>
<li>Strawberry</liv
<li>Papaya</li>
</ul>
<script>
   function changeList() {
      var x= document.createDocumentFragment();
      x.appendChild(document.getElementsByTagName("LI")[0]);
      x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
      document.getElementsByTagName("UL")[0].appendChild(x);
   }
</script>
</body>
</html>

輸出

這將產生以下輸出 -

單擊更改按鈕 -

在上麵的例子中 -

我們創建了一個包含五個列表項的無序列表 -

<ul>
<li>Mango</li>
<li>Peach</li>
<li>Guava<li>
<li>Strawberry</li>
<li>Papaya</li>
</ul>

然後我們創建了 CHANGE 按鈕，該按鈕將在用戶單擊時執行 changeList() 方法 -

<button type="button" onclick="changeList()">CHANGE</button>

changeList() 函數使用文檔對象的 createDocumentFragment() 方法創建文檔片段並將其分配給變量 x。使用 appnedChild() 方法，我們使列表元素成為文檔片段的子元素。我們將文檔片段內的第一個列表元素值設置為 “Watermelon”。然後我們將文檔片段附加為

function changeList() {
   var x= document.createDocumentFragment();
   x.appendChild(document.getElementsByTagName("LI")[0]);
   x.childNodes[0].childNodes[0].nodeValue = "Watermelon";
   document.getElementsByTagName("UL")[0].appendChild(x);
}

相關用法

注：本文由純淨天空篩選整理自AmitDiwan大神的英文原創作品 HTML DOM createDocumentFragment() method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。