HTML DOM Element appendChild() Methode

Definition und Verwendung

appendChild() Der Methode wird ein Knoten (Element) als letzter Unterlement hinzugefügt.

Weitere Informationen:

insertBefore() Methode

replaceChild() Methode

removeChild() Methode

remove() Methode

childNodes Eigenschaft

firstChild Eigenschaft

lastChild Eigenschaft

firstElementChild Eigenschaft

lastElementChild Eigenschaft

Verwandte Dokumentmethoden:

createElement() Methode

createTextNode() Methode

Beispiel

Beispiel 1

Ein Element in die Liste hinzufügen:

const node = document.createElement("li");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);

Vor dem Hinzufügen:

  • Kaffee
  • Tee

Nach dem Hinzufügen:

  • Kaffee
  • Tee
  • Wasser

Selbst ausprobieren

Beispiel 2

Eine Listeitem von einer Liste in eine andere Liste verschieben:

const node = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(node);

Vor dem Verschieben:

  • Kaffee
  • Tee

  • Wasser
  • Milch

Nach dem Verschieben:

  • Kaffee
  • Tee
  • Milch

  • Wasser

Selbst ausprobieren

Beispiel 3

Erstellen Sie einen Absatz mit Text:

  • Erstellen Sie ein Absatz-Element
  • Erstellen Sie einen Textknoten
  • Fügen Sie einen Textknoten zum Absatz hinzu
  • Fügen Sie einen Absatz dem Dokument hinzu

Erstellen Sie ein <p>-Element und fügen Sie es dem <div>-Element hinzu:

const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Selbst ausprobieren

Beispiel 4

Erstellen Sie ein <p>-Element und fügen Sie es dem Textkörper der Dokument hinzufügen:

const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);

Selbst ausprobieren

Syntax

element.appendChild(node)

oder

node.appendChild(node)

Parameter

Parameter Beschreibung
node Erforderlich. Der zu hinzufügende Knoten.

Rückgabewert

Typ Beschreibung
Knoten Hinzugefügter Knoten.

Browserunterstützung

element.appendChild() Es ist eine Eigenschaft von DOM Level 1 (1998).

Alle Browser unterstützen es vollständig:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Unterstützt 9-11 Unterstützt Unterstützt Unterstützt Unterstützt