Wie kann ich ein Array von untergeordneten Knoten in einem Vorgang mit einem übergeordneten Knoten mithilfe von JavaScript anfügen?

Question

Gibt es in JavaScript eine Möglichkeit, einem übergeordneten Knoten in einem Vorgang ein Array von untergeordneten Knoten hinzuzufügen?

Ich möchte dies in einem Arbeitsgang tun, um unnötige Repaints zu vermeiden.

Ich habe versucht, übergeordnete .appendChild(arrayOfNodes), aber das gibt eine Ausnahme.

Ich mache eine kleine Komponente, die unter mehreren Projekten wiederverwendet wird, ich möchte nicht auf irgendeine Bibliothek wie jQuery oder Zepto angewiesen sein.

Answer 1

Sie eine Methode Node hinzufügen könnte, die intern die appendChild Methode aufruft:

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

die dann wie so verwendbar sein würde:

node.appendChildren(arrayOfNodes) 

Answer 2

Sie ein Zwischen DocumentFragment verwenden könnten, das ist ein wenig verschachtelt, aber ist wahrscheinlich besser als Knoten zu einem Zeitpunkt, wenn Sie neu erstellte Knoten an einen vorhandenen Knoten innerhalb des Dokuments anhängen:

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

Answer 3

Ich weiß, das ist irgendwie alt, aber ich hatte eine ähnliche Frage. Ich entschied mich, eine einfache Funktion zu schreiben, die einen Eltern (Knoten) und Kinder Knoten (Knotenliste oder Array von Knoten), keine Erweiterung von Prototypen oder macht es komplizierter, als ich dachte, dass es sein musste ...

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