Node: appendChild() Methode - Web-APIs | MDN

Seitenleiste umschalten

Farbschema

Systemeinstellung
Hell
Dunkel

Deutsch

Sprache merken Mehr erfahren

Node: appendChild() Methode

Baseline Weitgehend verfügbar

Diese Funktion ist gut etabliert und funktioniert auf vielen Geräten und in vielen Browserversionen. Sie ist seit Juli 2015 browserübergreifend verfügbar.

Die appendChild() Methode der Node Schnittstelle fügt ein Knoten am Ende der Liste der Kinder eines angegebenen Elternelements hinzu.

Hinweis: Wenn das gegebene Kind ein Verweis auf einen bestehenden Knoten im Dokument ist, bewegt appendChild() es von seiner aktuellen Position an die neue Position.

Wenn das gegebene Kind ein DocumentFragment ist, wird der gesamte Inhalt des DocumentFragment in die Kindliste des angegebenen Elternelements verschoben.

appendChild() gibt den neu angehängten Knoten zurück, oder wenn das Kind ein DocumentFragment ist, das geleerte Fragment.

Hinweis: Im Gegensatz zu dieser Methode unterstützt die Element.append() Methode mehrere Argumente und das Anhängen von Strings. Sie können es bevorzugen, wenn Ihr Knoten ein Element ist.

In diesem Artikel

Syntax

appendChild(child)

Parameter

child

Der Knoten, der an das angegebene Elternelement (häufig ein Element) angehängt werden soll.

Rückgabewert

Ein Node, das das angehängte Kind (child) ist, außer wenn child ein DocumentFragment ist, in welchem Fall das leere DocumentFragment zurückgegeben wird.

Ausnahmen

HierarchyRequestError DOMException

Ausgelöst, wenn die Einschränkungen des DOM-Baums verletzt werden, also wenn einer der folgenden Fälle eintritt:

Wenn das Elternelement von child kein Document, DocumentFragment oder ein Element ist.
Wenn das Einfügen von child zu einem Zyklus führen würde, das heißt, wenn child ein Vorfahre des Knotens ist.
Wenn child kein DocumentFragment, ein DocumentType, ein Element oder ein CharacterData ist.
Wenn der aktuelle Knoten ein Text ist und sein Elternelement ein Document ist.
Wenn der aktuelle Knoten ein DocumentType ist und sein Elternelement nicht ein Document ist, da ein doctype immer ein direkter Nachfahre eines document sein sollte.
Wenn das Elternelement des Knotens ein Document ist und child ein DocumentFragment mit mehr als einem Element Kind oder das ein Text Kind hat.
Wenn das Einfügen von child zu einem Document mit mehr als einem Element als Kind führen würde.

Wenn das gegebene Kind ein Verweis auf einen bestehenden Knoten im Dokument ist, bewegt appendChild() es von seiner aktuellen Position an die neue Position — es ist nicht erforderlich, den Knoten von seinem Elternelement zu entfernen, bevor er an ein anderes Elternelement angehängt wird. Dies bedeutet, dass ein Knoten nicht gleichzeitig an zwei Stellen im Dokument sein kann. Die Node.cloneNode() Methode kann verwendet werden, um eine Kopie des Knotens zu erstellen, bevor er unter dem neuen Elternelement angehängt wird. Kopien, die mit cloneNode erstellt wurden, werden nicht automatisch synchron gehalten.

appendChild() gibt den neu angehängten Knoten zurück, anstatt des Elternelements. Dies bedeutet, dass Sie den neuen Knoten anhängen können, sobald er erstellt ist, ohne die Referenz darauf zu verlieren:

js
const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph later

Andererseits können Sie appendChild() nicht in einer fluent API Weise verwenden (wie jQuery).

js
// This doesn't append three paragraphs:
// the three elements will be nested instead of siblings
document.body
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"))
  .appendChild(document.createElement("p"));

Beispiel

Einen Absatz an den Body anhängen

js
// Create a new paragraph element, and append it to the end of the document body
const p = document.createElement("p");
document.body.appendChild(p);

Erstellen einer verschachtelten DOM-Struktur

In diesem Beispiel versuchen wir, eine verschachtelte DOM-Struktur mit möglichst wenigen temporären Variablen zu erstellen.

js
const fragment = document.createDocumentFragment();
const li = fragment
  .appendChild(document.createElement("section"))
  .appendChild(document.createElement("ul"))
  .appendChild(document.createElement("li"));
li.textContent = "hello world";

document.body.appendChild(fragment);

Es erzeugt den folgenden DOM-Baum:

html
<section>
  <ul>
    <li>hello world</li>
  </ul>
</section>

Help improve MDN

War diese Übersetzung hilfreich?

Ja Nein

Erfahren Sie, wie Sie beitragen können Diese Seite wurde automatisch aus dem Englischen übersetzt.

Übersetzung auf GitHub anzeigen • Fehler mit dieser Übersetzung melden

Document Object Model (DOM)
Node
Instanzeigenschaften
Instanzmethoden
Events
1. selectstart
Vererbung
1. EventTarget
Verwandte Seiten für DOM
Anleitungen
1. Anatomie des DOM
2. Attributreflexion
3. Auswahl und Traversierung im DOM-Baum
4. Erstellen und Aktualisieren des DOM-Baums
5. Arbeiten mit Ereignissen