How can I append an array of child nodes to a parent node in one operation using JavaScript?

javascript

Solution

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

Problem

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.

Original source