Javascript 将片段附加到现有的 HTML 元素答案

【问题标题】：Javascript append fragment to an existing HTML elementJavascript 将片段附加到现有的 HTML 元素
【发布时间】：2010-11-03 11:00:21
【问题描述】：

我创建了一个 DOM 片段，我在其中循环添加了几个 childNode：

fragment.appendChild( clone )

我想获取这个片段并用它来替换已经包含这些节点的现有 HTML 元素。

我可以使用

myContainer.appendChild(fragment)

但是，这也是在循环中完成的，并且片段被附加了太多次。如何获取片段，将其附加到 myContainer 并删除 myContainer 的旧子代。

谢谢。

【问题讨论】：

【解决方案1】：

你可能想要：

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

myContainer.appendChild(fragment);

【讨论】：

【解决方案2】：

循环结束后不能追加片段吗？

至于移除当前的子节点，你可以循环遍历它们并使用 removeChild 函数，或者你可以将元素的 innerHTML 设置为一个空字符串。如果在附加片段之前重置 innerHTML 应该没问题。

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

【讨论】：

【解决方案3】：

如果我理解正确，您正在创建一个带有一些子节点的新节点，并且您希望这个新节点替换您页面中的现有节点。

您可以：

【讨论】：

myContainer.replaceChild(fragment, myOldElement) 仅适用于一个孩子。在我的片段和 myOldElement 中，我有多个子节点。我正在寻找一种方法来使用 replaceChild() 一次用其他元素替换多个子元素......不仅仅是一个
@Mircea，你说你想要像 replaceChild 这样的东西，例如在数组上运行？恐怕没有。您必须循环调用它。
是的，比如 replaceChild，它不仅适用于一个孩子，也适用于一组孩子。