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

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

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

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

Answer 3

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

你可以：

• 删除现有节点的所有子节点，并将新子节点添加到现有节点
• 将所有孩子添加到另一个节点（我认为这就是您正在做的事情：添加到fragment），然后删除现有节点，并将节点添加到该位置。

请参阅removeChild和appendChild