Jak mogę dołączyć tablicę węzłów potomnych do węzła nadrzędnego w jednej operacji przy użyciu JavaScript?

Question

Czy w JavaScript istnieje sposób dodawania tablicy węzłów potomnych do węzła nadrzędnego w jednej operacji?

Chcę to zrobić w jednej operacji, aby zapobiec niepotrzebnym odświeżeniom.

Próbowałem rodzica .appendChild(arrayOfNodes), ale to daje wyjątek.

Tworzę mały komponent, który zostanie użyty ponownie w kilku projektach, nie chcę polegać na żadnej bibliotece, takiej jak jQuery lub Zepto.

Answer 1

Można dodać metodę Node, który wywołuje metodę appendChild wewnętrznie:

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

które następnie być użyteczny tak:

node.appendChildren(arrayOfNodes) 

Answer 2

Można użyć pośrednią DocumentFragment, który jest trochę zawiłe, ale prawdopodobnie działa lepiej niż robi to węzeł na raz, jeśli dodajesz nowo utworzone węzły do ​​istniejącego węzła w dokumencie:

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

Answer 3

Wiem, że to trochę stare, ale miałem podobne pytanie. Postanowiłem napisać prostą funkcję, która pobiera węzły nadrzędne (węzeł) i podrzędne (nodeList lub tablica węzłów), nie przedłużając żadnych prototypów ani nie czyniąc tego bardziej skomplikowanym, niż myślałem, że musi być ...

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