HTML DOM Element appendChild() metode

Definition og brug

appendChild() Metoden tilføjer en node (element) som den sidste underordnet element.

Se også:

insertBefore() metode

replaceChild() metode

removeChild() metode

remove() metode

childNodes egenskab

firstChild egenskab

lastChild egenskab

firstElementChild egenskab

lastElementChild egenskab

Relaterede dokumentmetoder:

createElement() metoden

createTextNode() metoden

Eksempel

Eksempel 1

Tilføj elementer til listen:

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

Før tilføjelse:

  • Kaffe
  • Te

Efter tilføjelse:

  • Kaffe
  • Te
  • Vand

Prøv det selv

Eksempel 2

Fra en liste til en anden liste flytte elementer:

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

Før flytning:

  • Kaffe
  • Te

  • Vand
  • Mælk

Efter flytning:

  • Kaffe
  • Te
  • Mælk

  • Vand

Prøv det selv

Eksempel 3

Opret et afsnit med tekst:

  • Opret et afsnitselement
  • Opret en tekstknudepunkt
  • Tilføj en tekstknudepunkt til afsnittet
  • Tilføj en afsnit til dokumentet

Opret en <p> element og tilføj det til <div> element:

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

Prøv det selv

Eksempel 4

Opret en <p> element og tilføj det til dokumentets tekstkrop:

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

Prøv det selv

Syntaks

element.appendChild(node)

eller

node.appendChild(node)

Parameter

Parameter Beskrivelse
node Obligatorisk. Knudepunktet, der skal tilføjes.

Returværdi

Type Beskrivelse
Knudepunkt Tilføjede knudepunkter.

Browserv understøttelse

element.appendChild() er en DOM Level 1 (1998) egenskab.

Alle browsere understøtter det fuldt ud:

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