Signatur
Beschreibung
Die Methode appendChild() des Node-Interfaces fügt einen Knoten am Ende der Liste der Kinder eines angegebenen Elternknotens hinzu.
Wenn das übergebene 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 – falls das Kind ein DocumentFragment ist – das geleerte Fragment.
Wenn das übergebene Kind eine Referenz auf einen bereits im Dokument existierenden Knoten ist, verschiebt appendChild() ihn von seiner aktuellen Position an die neue Position – es ist nicht erforderlich, den Knoten vor dem Anhängen an einen anderen Knoten aus seinem Elternknoten zu entfernen. Das bedeutet, dass ein Knoten nicht an zwei Stellen des Dokuments gleichzeitig sein kann. Die Methode Node.cloneNode() kann verwendet werden, um vor dem Anhängen unter dem neuen Elternknoten eine Kopie des Knotens zu erstellen. Mit cloneNode erstellte Kopien werden nicht automatisch synchron gehalten.
appendChild() gibt den neu angehängten Knoten zurück, nicht den Elternknoten. Das bedeutet, dass Sie den neuen Knoten anhängen können, sobald er erstellt ist, ohne die Referenz auf ihn zu verlieren:
Andererseits können Sie appendChild() nicht im Stil einer fluent API (wie jQuery) verwenden.
Parameter
| Name | Typ | Default | Beschreibung |
|---|---|---|---|
| $child Pflicht | Node | — | Der Knoten, der an den angegebenen Elternknoten angehängt werden soll (üblicherweise ein Element). |
Rückgabewert
Node, der das angehängte Kind (child) ist, außer wenn child ein DocumentFragment ist – in diesem Fall wird das leere DocumentFragment zurückgegeben.Beispiele
Referenz auf den angehängten Knoten behalten
const paragraph = document.body.appendChild(document.createElement("p"));
// You can append more elements to the paragraph laterKein fluent API-Stil
// 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"));Einen Paragraph an 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
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);// Wichtig · Fallstricke
Wenn das übergebene Kind eine Referenz auf einen bereits im Dokument existierenden Knoten ist, verschiebt appendChild() ihn von seiner aktuellen Position an die neue Position.
Anders als diese Methode unterstützt Element.append() mehrere Argumente sowie das Anhängen von Strings. Sie können diese bevorzugen, wenn Ihr Knoten ein Element ist.
Exceptions: HierarchyRequestError DOMException wird geworfen, wenn die Einschränkungen des DOM-Baums verletzt werden, u. a. wenn der Elternknoten von child kein Document, DocumentFragment oder Element ist; wenn das Einfügen von child zu einem Zyklus führen würde; wenn child 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; wenn der Elternknoten ein Document ist und child ein DocumentFragment mit mehr als einem Element-Kind oder mit einem Text-Kind ist; oder wenn das Einfügen von child zu einem Document mit mehr als einem Element als Kind führen würde.