Aufgabe auf ../../dom-elemente-einfuegen.html

Fügen Sie ein neues Element Geranien vor dem Eintrag Lilien in die Liste ein sowie einen Eintrag Nelken vor dem gerade eingefügten Element Geranien. Nutzen Sie zwei verschiedene Methoden, z.B. insertBefore() und insertAdjacentElement().

Lösung

Tipp: Denken Sie daran, dass querySelectorAll eine NodeList erzeugt, die sowohl eine Länge als auch einen Index hat! Der Listenpunkt Lilien hat also den Index 2.

<ul id="garten">
   <li>Rosen</li>
   <li>Magnolien</li>
   <li>Lilien</li>
   <li>Flieder</li>
</ul> 

Einfügen mit insertBefore():

const newNode = document.createElement("li");
const textNode = document.createTextNode("Geranien");
newNode.appendChild (textNode);

const list = document.getElementById("garten");
list.insertBefore (newNode, list.children[2]);

Einfügen mit before():

const blumen = document.querySelectorAll ("#garten li");
const nelken = document.createElement ("li");
nelken.innerHTML = "Nelken";
list.children[2].before (nelken);