HTML DOM-element appendChild()

❮ Vorige ❮ Element Object Referentie Volgende ❯

Voorbeelden

Voeg een item toe aan een lijst:

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

Voordat:

Coffee
Tea

Na:

Coffee
Tea
Water

Een item van de ene lijst naar de andere verplaatsen:

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

Voordat:

Coffee
Tea

Water
Milk

Na:

Coffee
Tea
Milk

Water

Hieronder meer voorbeelden.

Definitie en gebruik

De appendChild()methode voegt een knooppunt toe als het laatste kind van een knooppunt.

Tip: Als u een nieuwe alinea met tekst wilt maken, vergeet dan niet om de tekst te maken als een tekstknooppunt dat u aan de alinea toevoegt en vervolgens de alinea aan het document toevoegt.

U kunt deze methode ook gebruiken om een element van het ene element naar het andere te verplaatsen (zie "Meer voorbeelden").

Zie ook:

Het Element FirstKinderbezit

Het element lastKindereigendom

De methode Element insertBefore()

Syntaxis

node.appendChild(node)

Parameters:

Parameter	Description
node	Required. The node to append.

Winstwaarde

Type	Beschrijving
Knooppunt	Het toegevoegde knooppunt

Meer voorbeelden

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

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

para.appendChild(node);
document.getElementById("myDIV").appendChild(para);

Maak een <p>-element en voeg het toe aan de hoofdtekst van het document:

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

para.appendChild(node);
document.body.appendChild(para);