Node: Methode appendChild()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

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

Hinweis: Wenn das angegebene Kind ein Verweis auf einen vorhandenen Knoten im Dokument ist, verschiebt appendChild() es von seiner aktuellen Position zur neuen Position.

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

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

Hinweis: Anders als diese Methode unterstützt die Element.append() Methode mehrere Argumente und das Anhängen von Zeichenfolgen. Sie können bevorzugt diese verwenden, wenn Ihr Knoten ein Element ist.

Syntax

appendChild(aChild)

Parameter

aChild: Der Knoten, der an den angegebenen Elternknoten angehängt werden soll (üblicherweise ein Element).

Rückgabewert

Ein Node, der das angehängte Kind (aChild) ist, es sei denn, aChild ist ein DocumentFragment, in diesem Fall wird das leere DocumentFragment zurückgegeben.

Ausnahmen

HierarchyRequestError DOMException

Wird ausgelöst, wenn die Einschränkungen des DOM-Baums verletzt werden, das heißt, wenn einer der folgenden Fälle eintritt:

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

Beschreibung

Wenn das angegebene Kind ein Verweis auf einen bestehenden Knoten im Dokument ist, verschiebt appendChild() es von seiner aktuellen Position zur neuen Position — es ist nicht erforderlich, den Knoten aus seinem Elternknoten zu entfernen, bevor es an einen anderen Knoten angehängt wird. Das bedeutet, dass ein Knoten nicht gleichzeitig an zwei Punkten des Dokuments vorhanden sein kann. Die Methode Node.cloneNode() kann verwendet werden, um eine Kopie des Knotens zu erstellen, bevor dieser unter dem neuen Elternknoten angehängt wird. Kopien, die mit cloneNode erstellt werden, werden nicht automatisch synchron gehalten.

appendChild() gibt den neu angehängten Knoten zurück, anstatt den Elternknoten. Das bedeutet, Sie können den neuen Knoten sofort nach seiner Erstellung anhängen, ohne die Referenz darauf zu verlieren:

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 Art (wie jQuery) verwenden.

// 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

// 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 so wenigen temporären Variablen wie möglich zu erstellen.

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);

Das generiert den folgenden DOM-Baum:

html

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

Spezifikationen

Specification
DOM Standard # dom-node-appendchild

Browser-Kompatibilität

BCD tables only load in the browser