javascript - 如何使用 JavaScript 在一次操作中将一组子节点附加到父节点？

Question

在 JavaScript 中，有没有办法在一次操作中将一组子节点添加到父节点？

我想在一次操作中做到这一点，以防止不必要的重绘。

我试过 parent .appendChild(arrayOfNodes)，但这给出了一个例外。

我正在制作一个将在多个项目中重用的小组件，我不想依赖任何像 jQuery 或 Zepto 这样的库。

Answer 1

您可以使用一个 intermediate DocumentFragment，这有点复杂，但如果您将新创建的节点附加到文档中的现有节点，它可能比一次执行一个节点更好：

var frag = document.createDocumentFragment();
for (var i = 0; i < arrayOfNodes.length; ++i) {
    frag.appendChild(arrayOfNodes[i]);
}
someElement.appendChild(frag);

Answer 2

您可以向Node添加一个方法，该方法在内部调用 appendChild 方法：

(function () {
  Node.prototype.appendChildren(arrayOfNodes) {
    var length = arrayOfNodes.length;
    for (var i = 0; i < length; i++) {
      this.appendChild(arrayOfNodes[i]);
    }
  }());

然后可以像这样使用：

node.appendChildren(arrayOfNodes)

Answer 3

我知道这有点老了，但我有一个类似的问题。我决定编写一个简单的函数，它需要一个父节点（节点）和子节点（nodeList 或节点数组），而不是扩展任何原型或使它比我想象的更复杂......

 function appendChildren(parent, children) {
     for (var i=0; i<children.length;i++) {
         child = children[i];
         parent.appendChild(child);
     }
     return parent;
 }

Answer 4

使用 ES6 扩展运算符，可以将 NodeList 附加到一行中的元素：

parent.append(...children);