Come posso aggiungere un array di nodi figlio a un nodo genitore in un'unica operazione utilizzando JavaScript?

Question

In JavaScript, c'è un modo per aggiungere un array di nodi figlio a un nodo genitore in un'unica operazione?

Desidero eseguire questa operazione in un'unica operazione per evitare inutili riduzioni.

Ho provato il genitore .appendChild(arrayOfNodes), ma questo fornisce un'eccezione.

Sto creando un piccolo componente che verrà riutilizzato tra diversi progetti, non voglio dipendere da alcuna libreria come jQuery o Zepto.

Answer 1

Si potrebbe aggiungere un metodo per Node, che chiama il metodo appendChild internamente:

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

che sarebbe poi utilizzabile in questo modo:

node.appendChildren(arrayOfNodes) 

Answer 2

si potrebbe usare un intermedio DocumentFragment, che è un po 'contorto, ma è probabile che funzioni meglio di un nodo alla volta se si aggiungono nodi appena creati a un nodo esistente all'interno del documento:

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

Answer 3

So che questo è un po 'vecchio ma ho avuto una domanda simile. Ho deciso di scrivere una semplice funzione che accetta un nodo genitore (nodi) e figli (nodoList o array di nodi), non estendere alcun prototipo o renderlo più complicato di quanto pensavo dovesse essere ...

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