如何使用JavaScript一次性将子节点数组附加到父节点？

Question

在JavaScript中，有没有一种方法可以通过一次操作将子节点数组添加到父节点中？

我希望通过一次操作来防止不必要的重绘。

我尝试使用parent .appendChild(arrayOfNodes)，但是会出现异常。

我正在制作一个小组件，将在多个项目中重复使用，我不想依赖于任何库，如jQuery或Zepto。

- user920041

---

只是出于好奇（除非这是项目限制），为什么不使用 jQuery？ - adamb

我正在制作一个可重用的组件，并且可以假设该项目中使用了jQuery或Zepto，因此它必须是标准的JavaScript。 - user920041

Answer 1

您可以使用中间节点DocumentFragment，虽然有点复杂，但如果要将新创建的节点附加到文档中现有节点中，则性能很可能比逐个节点执行更好：

您可以使用中间节点DocumentFragment，虽然有点复杂，但如果要将新创建的节点附加到文档中现有节点中，则性能很可能比逐个节点执行更好：

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

- Tim Down

---

我非常确定你会想要执行someElement.appendChild(frag.cloneNode(true))。不确定为什么，但这是John Resig所说的，我倾向于相信他。 - hobberwickey

@hobberwickey：我不是，但我无法想象他会在这里推荐那样做：没有必要克隆，如果插入的节点上有事件处理程序，则插入克隆节点肯定是错误的。 - Tim Down

@hobberwickey：唯一需要克隆的原因是如果您想要将同一组节点的多个副本插入文档中，而这在此处并不需要。不幸的是，Resig的文章在这一点上并不清楚。 - Tim Down

Answer 2

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

parent.append(...children);

- Travis Wagner

Answer 3

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

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

- nf071590

---

只需添加此 Element.prototype.appendChildren = appendChildren; 并删除 parent 参数，它将变为 this。 - Guja1501

Answer 4

您可以在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)

- Rich O'Kelly

---

在 IE < 9 中，Node.prototype 不存在。 - Tim Down

这会不会导致多次重新渲染？ - emanuel sanga