Jak dodać element do HTMLCollection w javascript?

Question

Mam obiekt HTMLCollection, którego można użyć do manipulowania treścią zestawu HTMLCollection. Chciałbym wiedzieć, jak wyjść, aby dodać element div do pierwszego, ostatniego lub do dowolnego konkretnego indeksu HTMLCollection. Proszę zasugeruj coś. Tutaj nDivs jest kolekcją 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

Według MDN docs

HTMLCollection to interfejs reprezentujący ogólny zbiór elementów (w kolejności dokumentu) i oferuje metody i właściwości dla przejeżdżające listę.

Ponieważ jest to interfejs, użytkownik może wchodzić w interakcję z HTMLCollection za pośrednictwem swojego methods. Nie ma tam żadnych metod modyfikacji obiektu, tylko jego odczytanie. Będziesz musiał manipulować DOM w inny sposób.

Oto kilka sugestii dotyczących czystego JS, ale bardzo polecam jQuery do takich zadań. Załóżmy, że pracujesz z nowym elementem newDiv i HTMLCollectiondocument.forms:

wkładka przedforms[1]:

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

Insert poforms[1]:

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

zastąpićforms[1]:

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

Dokumentacja i przykłady dla insertBefore(), replaceChild(), nextSibling i parentNode.