替换 HTMLElement 的所有子元素？

Question

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

最快的方法是什么？我当前的方法是将所有新元素收集到 DocumentFragment 中。我发现实际替换子项的唯一方法是一一删除所有子项，然后附加片段。难道就没有更快的办法吗？

注意：该解决方案不需要跨浏览器，但最好不需要 3d 方组件，例如 jQuery。目标设备是 WebKit，CPU 速度非常慢，因此我需要完全控制任何回流。

Answer 1

如果您只是想替换所有子项，关于类型，为什么不将其内容设置为 '' 然后添加代码：

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

这基本上会以最快的方式删除所有子项:)

Answer 2

2020 更新 - 使用 replaceChildren() API！

现在可以使用（支持跨浏览器） 来替换所有子节点ReplaceChildren() API：

container.replaceChildren(...arrayOfNewChildren);

这将在一次操作中执行以下两项操作：a)删除所有现有子级，以及b)追加所有给定的新子级。

您还可以使用相同的 API 仅删除现有子项，而不替换它们：

container.replaceChildren();

Chrome/Edge 86+、Firefox 78+ 和 Safari 14+ 支持此功能。它是 完全指定行为。这可能比这里提出的任何其他方法更快，因为删除旧子项和添加新子项是 a) 不需要 innerHTML 完成的，并且 b) 在一步而不是多步。

Answer 3

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

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

或者：

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

Answer 4

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

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

oldNode.parentElement.replaceChild(newNode, oldNode)

Answer 5

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

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

Answer 6

从最上面的答案来看，我们还可以使用outerHTML 在一行中完成它。

container.innerHTML = newContainerElements.outerHTML