# 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)](https://www.ionos.at/digitalguide/websites/web-entwicklung/was-ist-das-document-object-model-dom/)-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()](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-removeclass/) oder [jQuery.on()](https://www.ionos.at/digitalguide/websites/web-entwicklung/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](https://www.ionos.at/digitalguide/hosting/blogs/wordpress-jquery/), wodurch Sie spezielle Funktionalitäten und interaktive Elemente in Ihrem CMS realisieren können.

Tipp Sie planen den Aufbau einer Website? IONOS bietet Ihnen die ideale Lösung mit großzügigem [Webspace](https://www.ionos.at/hosting/webspace "Webspace mieten bei IONOS"), kostengünstigen Tarifen und einer Vielzahl von Funktionen, die Ihren individuellen Anforderungen gerecht werden. Starten Sie jetzt und bringen Sie Ihre Website erfolgreich ins Internet.

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

JQuery.append() akzeptiert **zwei Parameter**:

```jQuery
$(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](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-selectors/) 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.

Tipp Erschließen Sie das gesamte Leistungsspektrum Ihrer IONOS-Dienste mithilfe der [IONOS API](https://developer.hosting.ionos.de "IONOS Entwickler API"). Durch die einfache Integration, Skalierbarkeit und Automatisierungsmöglichkeiten können Sie Ihre Ressourcen effizient nutzen. Entdecken Sie die vielfältigen Vorteile und maximieren Sie Ihr Online-Potenzial mit der IONOS API.

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

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

Tipp Zum Vertiefen Ihrer **Grundkenntnisse von jQuery** empfehlen wir Ihnen unser [jQuery-Tutorial](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-tutorial-einbindung-und-erste-schritte/ "jQuery-Tutorial – alle Grundlagen zu Selektoren und Syntax"). Dort finden Sie umfassende Informationen und praktische Anleitungen, um Ihre jQuery-Fähigkeiten weiterzuentwickeln und ansprechende Websites zu erstellen.

### jQuery.append() HTML

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

```jQuery
$("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**:

```jQuery
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.

```jQuery
$("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:

```jQuery
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.

Tipp Optimieren Sie die Bereitstellung Ihrer Webanwendung mit [Deploy Now](https://www.ionos.at/hosting/deploy-now "Automatische Deployments mit IONOS") von IONOS. Dieses leistungsstarke Tool automatisiert die Einrichtung aller notwendigen Ressourcen wie Serverinstanzen, Datenbanken und Domains. Dadurch wird kostbare Zeit eingespart, die Sie stattdessen in die eigentliche Entwicklung investieren können.


This is a markdown version of: [https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-append/](https://www.ionos.at/digitalguide/websites/web-entwicklung/jquery-append/) for AI/LLM consumption.