Node: appendChild() Methode

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 einen Knoten am Ende der Liste von Kindknoten eines angegebenen Elternknotens hinzu.

Hinweis: Wenn das angegebene Kind ein Verweis auf einen vorhandenen Knoten im Dokument ist, bewegt 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 hinzugefügten 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, sie zu verwenden, wenn Ihr Knoten ein Element ist.

Syntax

appendChild(aChild)

Parameter

aChild: Der Knoten, der dem angegebenen Elternknoten (normalerweise ein Element) hinzugefügt werden soll.

Rückgabewert

Ein Node, der das hinzugefügte Kind (aChild) ist, außer wenn aChild ein DocumentFragment ist, in diesem Fall wird das leere DocumentFragment zurückgegeben.

Ausnahmen

HierarchyRequestError DOMException

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

Wenn der Elternknoten 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 Ahne des Knotens ist.
Wenn aChild kein DocumentFragment, DocumentType, Element oder CharacterData ist.
Wenn der aktuelle Knoten ein Text ist und sein Elternknoten ein Document ist.
Wenn der aktuelle Knoten ein DocumentType ist und sein Elternknoten kein Document ist, da ein doctype immer ein direkter Nachkomme eines Dokuments sein sollte.
Wenn der Elternknoten des Knotens ein Document ist und aChild ein DocumentFragment mit mehr als einem Element-Kind oder einem Text-Kind ist.
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 vorhandenen Knoten im Dokument ist, bewegt appendChild() es von seiner aktuellen Position zur neuen Position — es ist nicht erforderlich, den Knoten von seinem Elternknoten zu entfernen, bevor er einem anderen Knoten hinzugefügt wird. Dies bedeutet, dass ein Knoten nicht gleichzeitig an zwei Stellen im Dokument sein kann. Die Methode Node.cloneNode() kann verwendet werden, um eine Kopie des Knotens zu erstellen, bevor er unter den neuen Elternknoten hinzugefügt wird. Kopien, die mit cloneNode erstellt wurden, werden nicht automatisch synchron gehalten.

appendChild() gibt den neu hinzugefügten Knoten zurück, anstatt des Elternknotens. Das bedeutet, dass Sie den neuen Knoten anhängen können, sobald er erstellt ist, ohne die Referenz 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 möglichst wenigen temporären Variablen 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);

Dies erzeugt 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