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");
2
3const eintrag = document.createElement("li");
4const eintrag2 = document.createElement("li");
5eintrag.textContent = "Neuer Eintrag";
6eintrag2.textContent = "Neuer Eintrag2";
7
8liste.append(eintrag, eintrag2, "Neuer");
9

Output

Aufgabe 1
Aufgabe 2
Neuer Eintrag
Neuer Eintrag2

Neuer

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

Aufgabe 1
Aufgabe 2
Neuer Eintrag

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
Aufgabe 1
Aufgabe 2

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

Hinweis vor dem Absatz

Ein 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

Ein Absatz

Hinweis nach dem 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

Vor dem ersten Eintrag
Aufgabe 1
Aufgabe 2

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