使用现代JS！直接使用`remove`而不是`removeChild`

Question

在我的代码中，我经常需要用新的子列表替换某个HTML容器的所有子容器。

最快的方法是什么？我目前的方法是将所有新元素收集到DocumentFragment中。我发现然后实际替换孩子的唯一方法是逐个删除所有孩子，并附加片段。有没有更快的方法？

注意：解决方案不需要跨浏览器，但最好不要求使用3d-party组件，例如jQuery。目标设备是非常慢CPU上的WebKit，所以我需要完全控制任何回流。

Answer 1

如果你只想替换所有孩子，关于类型，你为什么不把它的内容设置为''然后添加你的代码：

container.innerHTML = '';
container.appendChild( newContainerElements );

基本上会以最快的方式移除所有孩子：）

Answer 2

while (container.firstChild) {
    container.firstChild.remove();
}

可替换地：

let child;
while (child = container.firstChild) {
    child.remove();
}

Answer 3

设置innerHTML并不起作用的可能替代方案：

while(container.firstChild)
{
  container.removeChild(container.firstChild);
}
container.appendChild(newChild)

Answer 4

这不是直接解决问题，但是在大多数情况下，它是可用的，并且可能是性能更高的方法之一。

您可以换出整个节点，而不用删除并填充其内容。

oldNode.parentElement.replaceChild(newNode, oldNode)

Answer 5

从最上面的答案开始，我们还可以使用outerHTML在一行中做到这一点。

container.innerHTML = newContainerElements.outerHTML

Answer 6

现在可以使用（支持跨浏览器）replaceChildren() API替换所有子级：

container.replaceChildren(...arrayOfNewChildren);

您还可以使用相同的API来删除现有子级，而无需替换它们：

container.replaceChildren();

Chrome / Edge 86 +，Firefox 78 +，Safari 14+等支持此功能。与这里提出的其他方法相比，该方法可能更快，因为移除了大孩子，新孩子的添加是a）不需要innerHTML，并且b）一步而不是多个。

使用现代JS！直接使用remove而不是removeChild