jQuery.append(): Elemente in den DOM-Baum einfügen

Mit der jQuery.append()-Methode lassen sich komplexe Aufgaben wie das Erstellen von dynamischen Listen, das Hinzufügen von Formularelementen oder das Laden von zusätzlichen Inhalten über AJAX vereinfachen. In diesem Artikel lernen Sie die Syntax und die Verwendung der Methode kennen.

Was ist die jQuery.append()-Methode?

jQuery.append() ist eine Funktion aus der jQuery-Bibliothek, die dynamisch Inhalte in den DOM (Document Object Model)-Baum einfügt. Mit dieser Methode können Sie neue Elemente oder Strukturen am Ende eines bestimmten Objekts anhängen. Die .append()-Methode von jQuery besitzt vielfältige Möglichkeiten und kann in Verbindung mit anderen jQuery-Funktionen wie jQuery.removeClass() oder jQuery.on() eingesetzt werden. So eröffnen sich Ihnen zahlreiche Optionen, um Ihren DOM-Baum dynamisch zu erweitern. Besonders hervorzuheben ist auch die nahtlose Integration von jQuery in WordPress, wodurch Sie spezielle Funktionalitäten und interaktive Elemente in Ihrem CMS realisieren können.

Wie sehen Syntax und Parameter der jQuery.append()-Methode aus?

JQuery.append() akzeptiert zwei Parameter:

$(selector).append(content, function(index, html));

• content: repräsentiert den Inhalt, der hinzugefügt werden soll
• function(index, html) **: wird nach dem Anhängen des Inhalts aufgerufen
  • index: der Index des aktuellen Elements in der Menge der ausgewählten Objekte
  • html: der aktuelle HTML-Inhalt des Elements

Der selector kann eine beliebige gültige CSS-Auswahl sein, um das gewünschte Zielelement zu identifizieren. Selektoren in jQuery sind zum Beispiel IDs (#id), Klassen (.class) oder Elementnamen (z. B. div).

Der content darf eine Zeichenkette (Text), HTML-Code oder ein bereits vorhandenes DOM-Element sein. Übergeben Sie eine Zeichenkette, wird diese als Textinhalt des Elements hinzugefügt. Wenn Sie HTML-Code verwenden, wird dieser als neue Elementstruktur interpretiert und eingefügt. Bei einem vorhandenen DOM-Element hängt .append() dieses an das Zielobjekt an.

Beispiele für die Anwendung von jQuery.append()

Im Folgenden zeigen wir Ihnen einige Beispiele, die die Verwendung der .append()-Methode in jQuery verdeutlichen.

jQuery.append() HTML

Folgendes Beispiel zeigt das Hinzufügen von HTML-Strukturen:

$("header").append("<div><p>Neuer Inhalt</p></div>");

jQuery.append() div fügt dabei einen Container mit einem Paragrafen am Ende des header-Elements ein.

jQuery.append() DOM-Elemente

Analog erfolgt das Anhängen von DOM-Elementen:

var newElement = $("<div><p>Neuer Inhalt</p></div>");
$("header").append(newElement);

jQuery.append() mit Callback-Funktion

Durch eine Callback-Funktion haben Sie die Möglichkeit, nach dem Hinzufügen des Inhalts bestimmte Aktionen auszuführen oder auf das neu erstellte Element oder dessen Eigenschaften zuzugreifen.

$("div#container").append("<p>Erstes Element</p><p>Zweites Element</p><p>Drittes Element</p>", function(index, html) {
    console.log("Hinzugefügtes Element: " + html);
    console.log("Index des Elements: " + index);
});

Die Ausgabe lautet:

Hinzugefügtes Element: <p>Erstes Element</p>
Index des Elements: 0
Hinzugefügtes Element: <p>Zweites Element</p>
Index des Elements: 1
Hinzugefügtes Element: <p>Drittes Element</p>
Index des Elements: 2

In diesem Beispiel hängt jQuery.append() Element drei <p>-Tags (“Erstes Element”, “Zweites Element” und “Drittes Element”) gleichzeitig am Ende des div mit der ID container an. Die Callback-Funktion wird für jedes hinzugefügte Objekt aufgerufen und gibt den HTML-Inhalt des jeweiligen Elements und den entsprechenden Index an die Konsole aus.