Elemento HTML DOM appendChild()
Esempi
Aggiungi un elemento a un elenco:
const node = document.createElement("LI");
const textnode = document.createTextNode("Water");
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
- Coffee
- Tea
- Coffee
- Tea
- Water
Sposta un elemento da un elenco all'altro:
const node = document.getElementById("myList2").lastChild;
document.getElementById("myList1").appendChild(node);
- Coffee
- Tea
- Water
- Milk
- Coffee
- Tea
- Milk
- Water
Altri esempi di seguito.
Definizione e utilizzo
Il appendChild()
metodo aggiunge un nodo come ultimo figlio di un nodo.
Suggerimento: se desideri creare un nuovo paragrafo, con del testo, ricorda di creare il testo come nodo Testo che aggiungi al paragrafo, quindi aggiungi il paragrafo al documento.
Puoi anche usare questo metodo per spostare un elemento da un elemento all'altro (vedi "Altri esempi").
Sintassi
node.appendChild(node)
Parametri
Parameter | Description |
node | Required. The node to append. |
Valore di ritorno
Tipo | Descrizione |
Nodo | Il nodo aggiunto |
Altri esempi
Crea un elemento <p> e aggiungilo a un elemento <div>:
const para = document.createElement("p");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.getElementById("myDIV").appendChild(para);
Crea un elemento <p> e aggiungilo al corpo del documento:
const para = document.createElement("P");
const node = document.createTextNode("This is a paragraph.");
para.appendChild(node);
document.body.appendChild(para);
Metodi degli elementi correlati:
Il metodo dell'elemento removeChild()
Il metodo Element replaceChild()
Il metodo Element hasChildNodes()
Metodi di documenti correlati:
Il metodo Document createElement()
Il metodo Document createTextNode()
Supporto browser
element.appendChild()
è una funzionalità DOM di livello 1 (1998).
È completamente supportato in tutti i browser:
Chrome | IE | Edge | Firefox | Safari | Opera |
Yes | 9-11 | Yes | Yes | Yes | Yes |