Cách thêm phần tử vào HTMLCollection trong javascript?

Question

Tôi có một đối tượng HTMLCollection mà tôi có thể sử dụng để thao tác nội dung của HTMLCollection. Tôi muốn biết cách để thêm phần tử div vào phần tử đầu tiên, cuối cùng hoặc bất kỳ chỉ mục cụ thể nào của HTMLCollection. Hãy đề nghị một cái gì đó. Đây nDivs là Bộ sưu tập HTML.

var Div = document.createElement('div'); 
    for(i=0; i<9; i++){ 
     Div.appendChild(nDivs[0].children[0]); 
    } 
    Div.id = nDivs[0].id; 
    nDivs[0].parentNode.removeChild(nDivs[0]); 

    nDivs.appendChild(Div); //this is creating problem..need an alternative to this 
    document.getElementById("ABC").appendChild(nDivs[nDivs.length - 1]); 

Answer 1

Theo MDN docs

HTMLCollection là một giao diện đại diện cho một bộ sưu tập chung của yếu tố (theo thứ tự tài liệu) và cung cấp các phương pháp và các thuộc tính cho vượt qua danh sách.

Vì giao diện của nó, bạn bị hạn chế tương tác với HTMLCollection qua methods. Không có phương pháp nào để sửa đổi đối tượng, chỉ để đọc nó. Bạn sẽ phải thao tác DOM theo cách khác theo số.

Dưới đây là một số đề xuất sử dụng JS thuần túy, nhưng tôi khuyên bạn nên jQuery cho các tác vụ như vậy. Giả sử chúng ta đang làm việc với một nguyên tố mới newDiv và HTMLCollectiondocument.forms:

chèn trướcforms[1]:

forms[1].parentNode.insertBefore(newDiv, forms[1]); 

chèn sauforms[1]:

// there is no insertAfter() so use the next sibling as reference element 
forms[1].parentNode.insertBefore(newDiv, forms[1].nextSibling); 

thay.210:

forms[1].parentNode.replaceChild(newDiv, forms[1]); 

Tài liệu và ví dụ cho insertBefore(), replaceChild(), nextSibling, và parentNode.