Javascript將片段追加到現有HTML元素

Question

我創建了一個DOM片段，在其中我在一個循環中添加了幾個childNodes：

fragment.appendChild( clone )

我想拿這個片段，並用它替換已經包含那些節點的現有HTML元素。

我可以用

myContainer.appendChild(fragment)

但是，這也是在循環中完成的，並且片段被附加了太多次。 我如何獲得該片段，將其附加到myContainer並刪除myContainer的舊子項。

謝謝。

Answer 1

您可能想要：

while (myContainer.childNodes.length > 0) {
    myContainer.removeChild(myContainer.childNodes[0]);
}

myContainer.appendChild(fragment);

Answer 2

循環完成后，您是否不能追加Fragment？

至於刪除當前子節點，您可以循環瀏覽所有子節點並使用removeChild函數，也可以將元素的innerHTML設置為空字符串。 如果在添加片段之前重置了innerHTML，那應該沒問題。

myContainer.innerHTML = "";
myContainer.appendChild(fragment);

Answer 3

如果我對您的理解正確，那么您將創建一個帶有一些子節點的新節點，並且希望該新節點替換頁面中的現有節點。

您可以：

• 刪除現有節點的所有子節點，然后將新的子節點添加到現有節點
• 將所有子節點添加到另一個節點（我想這就是您正在做的事情：添加到fragment ），然后刪除現有節點，然后將該節點添加到該位置。

參見removeChild和appendChild