pomocí javascriptového .insertBefore k vložení položky jako posledního potomka

Moc mi chybí jQuery. Pracuji na projektu, kde si potřebuji znovu ušpinit ruce dobrým „obyčejným Javascriptem“.

Mám tento scénář:

parent
    child1
    child2
    child3

Prostřednictvím javascriptu chci mít možnost vložit nový uzel před nebo za kterékoli z těchto dětí. Zatímco javascript má insertBefore , neexistuje žádný insertAfter .

Vložit před by fungovalo dobře na výše uvedeném vložení uzlu před některý z těchto:

parent.insertBefore(newNode, child3)

Ale jak se vloží uzel AFTER child3? Momentálně používám toto:

for (i=0,i<myNodes.length,i++){
    myParent.insertBefore(newNode, myNodes[i+1])
}

To znamená vložení mého nového uzlu před další sourozenecký uzel každého z mých uzlů (to znamená, že jej vloží za každý uzel).

Když se dostane do posledního uzlu, myNodes[i+1] stát se undefined protože se nyní pokouším získat přístup k indexu pole, který neexistuje.

Myslím, že by to byla chyba, ale zdá se, že to funguje dobře v tom případě, že v této situaci je můj uzel skutečně vložen za poslední uzel.

Ale je to správné? Nyní to testuji v několika moderních prohlížečích bez zdánlivě škodlivých účinků. Existuje lepší způsob?

Odpověď

Funkce insertBefore(newNode, referenceNode) je popsán jako:

Vloží zadaný uzel před referenční uzel jako potomka aktuálního uzlu. Pokud referenceNode je null, pak newNode je vložen na konec seznamu podřízených uzlů.

A od myNodes[i+1] je mimo hranice pole, vrátí undefined , což je považováno za null v tomto případě. To znamená, že dosáhnete požadovaného chování.

Edit:Odkaz na specifikaci W3 pro insertBefore()