Как добавить массив дочерних узлов к родительскому node за одну операцию с помощью JavaScript?

В JavaScript есть способ добавить массив дочерних узлов к родительскому node за одну операцию?

Я хочу сделать это за одну операцию, чтобы предотвратить ненужные рецензии.

Я пробовал родительский .appendChild(arrayOfNodes), но это дает исключение.

Я создаю небольшой компонент, который будет повторно использоваться в нескольких проектах, я не хочу зависеть от какой-либо библиотеки, такой как jQuery или Zepto.

Ответы

Ответ 1

Вы можете использовать промежуточный DocumentFragment, который немного запутан, но, скорее всего, будет работать лучше, чем делать его node за раз, если вы добавляете вновь созданные узлы к существующему node в пределах документ:

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

Ответ 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)

Ответ 3

Я знаю, что это своего рода старый, но у меня был аналогичный вопрос. Я решил написать простую функцию, которая берет родительский (node) и дочерние узлы (nodeList или массив узлов), не распространяя каких-либо прототипов или делая их более сложными, чем я думал, что это должно быть...

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