HTML DOM Element appendChild() metode
- Forrige side addEventListener()
- Næste side attributes
- Gå tilbage til niveauet over HTML DOM Elements objekt
Definition og brug
appendChild()
Metoden tilføjer en node (element) som den sidste underordnet element.
Se også:
Relaterede dokumentmetoder:
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
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
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);
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);
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 |
- Forrige side addEventListener()
- Næste side attributes
- Gå tilbage til niveauet over HTML DOM Elements objekt