Node: appendChild() Methode

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.

Beschreibung

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:

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

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

Es erzeugt den folgenden DOM-Baum:

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

Spezifikationen

Browser-Kompatibilität

Siehe auch

• Node.removeChild()
• Node.replaceChild()
• Node.insertBefore()
• Node.hasChildNodes()
• Element.insertAdjacentElement()
• Element.append()