Come aggiungere un elemento in HTMLCollection in javascript?

Question

Ho un oggetto HTMLCollection che posso usare per manipolare il contenuto di HTMLCollection. Vorrei conoscere la via d'uscita per aggiungere un elemento div al primo, all'ultimo o ad un indice specifico di HTMLCollection. Si prega di suggerire qualcosa. Qui nDivs è la raccolta 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

Secondo la MDN docs

HTMLCollection è un'interfaccia che rappresenta un insieme generico di elementi (nell'ordine del documento) e offre metodi e proprietà per lettura dell'elenco.

Perché la sua interfaccia, il gioco è limitato ad interagire con un HTMLCollection attraverso il suo methods. Non ci sono metodi per modificare l'oggetto, solo per leggerlo. Dovrai manipolare il DOM in altro modo.

Ecco alcuni suggerimenti che utilizzano puro JS, ma consiglio vivamente lo jQuery per tali compiti. Supponiamo che stiamo lavorando con un nuovo elemento newDiv e la HTMLCollectiondocument.forms:

inserto primaforms[1]:

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

Inserisci dopoforms[1]:

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

sostituireforms[1]:

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

documentazione ed esempi per insertBefore(), replaceChild(), nextSibling e parentNode.