Elemente in das DOM einfügen

Ein mit createElement erzeugtes Element wird erst sichtbar, wenn du es ins DOM einfügst. Dafür gibt es mehrere Methoden – je nachdem, ob das Element am Ende, am Anfang oder neben einem anderen Element landen soll.

append()

append() hängt ein oder mehrere Elemente (oder Text) als letztes Kind an ein Elternelement an. Es ist die moderne Variante und akzeptiert auch Strings.

append()

1const liste = document.querySelector("ul");
2const eintrag = document.createElement("li");
3eintrag.textContent = "Neuer Eintrag";
4
5liste.append(eintrag);
6// auch mehrere auf einmal:
7// liste.append(eintrag, " Text");

Output

Der neue Eintrag erscheint am Ende der Liste.

appendChild()

appendChild() hängt ebenfalls ein Element als letztes Kind an. Im Unterschied zu append() nimmt es nur ein Element entgegen (keinen Text-String) und gibt das eingefügte Element zurück.

appendChild()

1const liste = document.querySelector("ul");
2const eintrag = document.createElement("li");
3eintrag.textContent = "Neuer Eintrag";
4
5liste.appendChild(eintrag);

Output

Ergebnis wie bei append(): Der Eintrag steht am Ende der Liste. Für neuen Code reicht meist append().

prepend()

prepend() fügt ein Element als erstes Kind ein – also ganz oben im Elternelement.

prepend()

1const liste = document.querySelector("ul");
2const eintrag = document.createElement("li");
3eintrag.textContent = "Ganz oben";
4
5liste.prepend(eintrag);

Output

„Ganz oben“ steht jetzt als erster Listenpunkt.

before()

before() fügt ein Element vor dem ausgewählten Element ein – also als Geschwisterknoten davor, nicht als Kind.

before()

1const absatz = document.querySelector("p");
2const hinweis = document.createElement("p");
3hinweis.textContent = "Hinweis vor dem Absatz";
4
5absatz.before(hinweis);

Output

Der Hinweis erscheint direkt über dem bestehenden Absatz.

after()

after() fügt ein Element nach dem ausgewählten Element ein – als Geschwisterknoten danach.

after()

1const absatz = document.querySelector("p");
2const hinweis = document.createElement("p");
3hinweis.textContent = "Hinweis nach dem Absatz";
4
5absatz.after(hinweis);

Output

Der Hinweis erscheint direkt unter dem bestehenden Absatz.

insertBefore()

insertBefore() ist die ältere Methode: Du rufst sie am Elternelement auf und übergibst das neue Element sowie das Referenz-Kind, vor dem eingefügt werden soll.

insertBefore()

1const liste = document.querySelector("ul");
2const erster = liste.firstElementChild;
3const eintrag = document.createElement("li");
4eintrag.textContent = "Vor dem ersten Eintrag";
5
6liste.insertBefore(eintrag, erster);

Output

Der neue Eintrag steht vor dem bisherigen ersten Listenpunkt. Modern oft einfacher: erster.before(eintrag).

Im nächsten Kapitel lernst du: Elemente aus DOM entfernen