Làm cách nào để nối thêm một loạt các nút con vào nút cha trong một thao tác bằng JavaScript?

Question

Trong JavaScript, có cách nào để thêm một mảng các nút con vào một nút cha trong một thao tác không?

Tôi muốn thực hiện thao tác này trong một thao tác để ngăn chặn các bản sao không cần thiết.

Tôi đã thử cha mẹ .appendChild(arrayOfNodes), nhưng điều đó mang lại một ngoại lệ.

Tôi đang tạo một thành phần nhỏ sẽ được sử dụng lại trong một số dự án, tôi không muốn phụ thuộc vào bất kỳ thư viện nào như jQuery hay Zepto.

Answer 1

Bạn có thể thêm một phương pháp để Node, đó gọi phương thức appendChild trong nội bộ:

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

Mà sau đó sẽ sử dụng được như vậy:

node.appendChildren(arrayOfNodes) 

Answer 2

Bạn có thể sử dụng một trung gian DocumentFragment, đó là một chút phức tạp nhưng có khả năng hoạt động tốt hơn làm một nút tại một thời điểm nếu bạn đang thêm các nút mới được tạo vào một nút hiện có trong tài liệu:

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

Answer 3

Tôi biết đây là loại cũ nhưng tôi đã có một câu hỏi tương tự. Tôi quyết định viết một hàm đơn giản có nút cha mẹ (nút) và nút con (nodeList hoặc mảng nút), không mở rộng bất kỳ nguyên mẫu nào hoặc khiến nó phức tạp hơn ...

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