Die Manipulation des DOMs beinhaltet oft das dynamische Erstellen und Hinzufügen neuer Elemente zum Dokument oder das Entfernen vorhandener Elemente basierend auf Benutzerinteraktionen. Hier werden wir betrachten, wie man Elemente dynamisch erstellt und hinzufügt.

Erstellen neuer Elemente und Hinzufügen zum DOM

JavaScript bietet Methoden wie createElement(), appendChild() und insertBefore(), um neue Elemente zu erstellen und dem DOM hinzuzufügen.

CreateElement()

Die Methode createElement() erstellt ein neues HTML-Element, fügt es jedoch nicht dem DOM hinzu, bis Sie dies explizit mit Methoden wie appendChild() oder insertBefore() tun.

// JS:
const newDiv = document.createElement('div'); // Creates a new `<div>` element
newDiv.textContent = 'This is a new div';

AppendChild()

Die Methode appendChild() fügt ein neues Kindelement am Ende der Liste der Kindelemente eines Elternelements hinzu. Sie wird häufig verwendet, um Elemente am Ende eines Abschnitts, einer Liste oder eines Containers hinzuzufügen.

InsertBefore()

Die Methode insertBefore() fügt ein neues Element vor einem angegebenen vorhandenen Kindelement ein und ermöglicht so eine genauere Platzierung innerhalb eines Elternteils.