DOM - 用节点数组替换节点（高效）

时间：2016-09-12 14:20:02

标签： javascript 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);

2 个答案:

答案 0 :(得分：4)

您可以使用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

但是，在循环中插入多个元素在性能方面不应该有很大差异。从现有阵列构建文档片段可能会更慢。

答案 1 :(得分：0)

我最初的解决方案是一个简单的迭代：

// 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);