DOM - 用节点数组替换节点（高效）
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了DOM - 用节点数组替换节点（高效）相关的知识，希望对你有一定的参考价值。
用节点数组替换DOM节点的有效方法是什么 （这是一个简单的分离节点数组而不是htmlCollection）
（请不要jQuery答案）
Demo page
HTML
<body>
<header>
<div>foo</div>
<div>bar</div>
</header>
</body>
JS
// generate simple dummy array of detached DOM nodes
var link1 = document.createElement('a');
link1.innerHTML = 'xxx';
var link2 = document.createElement('a');
link2.innerHTML = 'yyy';
var nodesArr = [link1, link2];
// get the element to replace at some place in the DOM.
// in the case, the second <div> inside the <header> element
var nodeToReplace = document.querySelectorAll('header > div')[1];
// replace "nodeToReplace" with "nodesArr"
for(let node of nodesArr)
nodeToReplace.parentNode.insertBefore(node, nodeToReplace);
nodeToReplace.parentNode.removeChild(nodeToReplace);
答案
您可以使用DocumentFragment而不是数组：
var nodesFragment = document.createDocumentFragment();
nodesFragment.appendChild(link1);
nodesFragment.appendChild(link2);
nodeToReplace.replaceWith(nodesFragment); // experimental, no good browser support
nodeToReplace.parentNode.replaceChild(nodesFragment, nodeToReplace); // standard
但是，在循环中插入多个元素在性能方面应该没有太大差别。从现有阵列构建文档片段可能会更慢。
另一答案
我最初的解决方案是一个简单的迭代：
// iterate on the Array and insert each element before the one to be removed
for(let node of nodesArr)
nodeToReplace.parentNode.insertBefore(node, nodeToReplace);
// remove the chosen element
nodeToReplace.parentNode.removeChild(nodeToReplace);
以上是关于DOM - 用节点数组替换节点（高效）的主要内容，如果未能解决你的问题，请参考以下文章