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

Question

In JavaScript, is there a way to add an array of child nodes to a parent node in one operation?

I want to do this in one operation to prevent unnecessary repaints.

I have tried parent .appendChild(arrayOfNodes) , but that gives an exception.

I am making a small component that will be reused among several projects, I don't want to depend on any library like jQuery or Zepto.

Answer 1

You could use an intermediate DocumentFragment , which is a little convoluted but is likely to perform better than doing it a node at a time if you're appending newly-created nodes to an existing node within the document:

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

Answer 2

You could add a method to Node , which calls the appendChild method internally:

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

Which would then be useable like so:

node.appendChildren(arrayOfNodes)

Answer 3

I know this is kind of old but I had a similar question. I decided to write a simple function which takes a parent (node) and children nodes (nodeList or array of nodes), not extending any prototypes or making it any more complicated than I thought it needed to be...

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