HTML DOM Element appendChild() methode

Definitie en gebruik

appendChild() De methode voegt een knoop (element) als laatste sub-element toe aan een element.

Zie ook:

insertBefore() methode

replaceChild() methode

removeChild() methode

remove() methode

childNodes eigenschap

firstChild eigenschap

lastChild eigenschap

firstElementChild eigenschap

lastElementChild eigenschap

Gerelateerde documentatiemethoden:

createElement() methode

createTextNode() methode

Voorbeeld

Voorbeeld 1

Een item toevoegen aan de lijst:

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

Voor toevoegen:

  • Koffie
  • Thee

Na toevoegen:

  • Koffie
  • Thee
  • Water

Probeer het zelf

Voorbeeld 2

Een lijstitem van een lijst naar een andere lijst verplaatsen:

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

Voor het verplaatsen:

  • Koffie
  • Thee

  • Water
  • Melk

Na het verplaatsen:

  • Koffie
  • Thee
  • Melk

  • Water

Probeer het zelf

Voorbeeld 3

Maak een paragraaf met tekst aan:

  • Maak een paragraafselement aan
  • Maak een tekstknoop aan
  • Voeg een tekstknoop toe aan de paragraaf
  • Voeg een paragraaf toe aan het document

Maak een <p> element aan en voeg het toe aan de <div> element:

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

Probeer het zelf

Voorbeeld 4

Maak een <p> element aan en voeg het toe aan de正文 van het document:

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

Probeer het zelf

Syntax

element.appendChild(node)

of

node.appendChild(node)

Parameter

Parameter Beschrijving
node Verplicht. De te toevoegen knoop.

Retourwaarde

Type Beschrijving
Knoop Toegevoegde knopen.

Browserondersteuning

element.appendChild() Is DOM Level 1 (1998) kenmerk.

Alle browsers ondersteunen het volledig:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Ondersteuning 9-11 Ondersteuning Ondersteuning Ondersteuning Ondersteuning