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

Mit der jQuery.append()-Methode lassen sich komplexe Aufgaben wie das Erstellen von dy­na­mi­schen Listen, das Hin­zu­fü­gen von For­mu­lar­ele­men­ten oder das Laden von zu­sätz­li­chen Inhalten über AJAX ver­ein­fa­chen. In diesem Artikel lernen Sie die Syntax und die Ver­wen­dung der Methode kennen.

Was ist die jQuery.append()-Methode?

jQuery.append() ist eine Funktion aus der jQuery-Bi­blio­thek, die dynamisch Inhalte in den DOM (Document Object Model)-Baum einfügt. Mit dieser Methode können Sie neue Elemente oder Struk­tu­ren am Ende eines be­stimm­ten Objekts anhängen. Die .append()-Methode von jQuery besitzt viel­fäl­ti­ge Mög­lich­kei­ten und kann in Ver­bin­dung mit anderen jQuery-Funk­tio­nen wie jQuery.re­mo­ve­Class() oder jQuery.on() ein­ge­setzt werden. So eröffnen sich Ihnen zahl­rei­che Optionen, um Ihren DOM-Baum dynamisch zu erweitern. Besonders her­vor­zu­he­ben ist auch die nahtlose In­te­gra­ti­on von jQuery in WordPress, wodurch Sie spezielle Funk­tio­na­li­tä­ten und in­ter­ak­ti­ve Elemente in Ihrem CMS rea­li­sie­ren können.

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

JQuery.append() ak­zep­tiert zwei Parameter:

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

• content: re­prä­sen­tiert den Inhalt, der hin­zu­ge­fügt werden soll
• function(index, html): wird nach dem Anhängen des Inhalts auf­ge­ru­fen
  • index: der Index des aktuellen Elements in der Menge der aus­ge­wähl­ten Objekte
  • html: der aktuelle HTML-Inhalt des Elements

Der selector kann eine beliebige gültige CSS-Auswahl sein, um das ge­wünsch­te Ziel­ele­ment zu iden­ti­fi­zie­ren. Se­lek­to­ren in jQuery sind zum Beispiel IDs (#id), Klassen (.class) oder Ele­ment­na­men (z. B. div).

Der content darf eine Zei­chen­ket­te (Text), HTML-Code oder ein bereits vor­han­de­nes DOM-Element sein. Übergeben Sie eine Zei­chen­ket­te, wird diese als Text­in­halt des Elements hin­zu­ge­fügt. Wenn Sie HTML-Code verwenden, wird dieser als neue Ele­ment­struk­tur in­ter­pre­tiert und eingefügt. Bei einem vor­han­de­nen DOM-Element hängt .append() dieses an das Ziel­ob­jekt an.

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

Im Folgenden zeigen wir Ihnen einige Beispiele, die die Ver­wen­dung der .append()-Methode in jQuery ver­deut­li­chen.

jQuery.append() HTML

Folgendes Beispiel zeigt das Hin­zu­fü­gen von HTML-Struk­tu­ren:

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

jQuery.append() div fügt dabei einen Container mit einem Pa­ra­gra­fen 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ög­lich­keit, nach dem Hin­zu­fü­gen des Inhalts bestimmte Aktionen aus­zu­füh­ren oder auf das neu erstellte Element oder dessen Ei­gen­schaf­ten zu­zu­grei­fen.

$("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”) gleich­zei­tig am Ende des div mit der ID container an. Die Callback-Funktion wird für jedes hin­zu­ge­füg­te Objekt auf­ge­ru­fen und gibt den HTML-Inhalt des je­wei­li­gen Elements und den ent­spre­chen­den Index an die Konsole aus.