Metodo appendChild() dell'HTML DOM

Oggetto Elemento HTML DOM

appendChild()Il metodo ha lo scopo di: aggiungere un nodo alla fine della lista dei sottoelementi del nodo genitore specificato.

Se il sottoelemento specificato è un riferimento a un nodo esistente nel documento, appendChild() lo sposta dalla sua posizione attuale alla nuova posizione (vedi gli esempi seguenti).

UsoinsertBefore()Il metodo può inserire un nuovo sottoelemento prima di un sottoelemento esistente specificato.

Sintassi:

node.appendChild(node)

var newElem = document.createElement("h3"); // Crea un nuovo elemento h3
var newContent = document.createTextNode("Ciao, benvenuto!"); // Crea del contenuto di testo　
newElem.appendChild(newContent); // Aggiungi il nodo di testo al nuovo h3　
document.body.appendChild(newElem); // Aggiungi l'elemento creato e il suo contenuto al DOM

Attenzione:Se si desidera creare un nuovo elemento con testo, ricordare di creare il testo come nodo di testo, quindi aggiungerlo all'elemento e infine aggiungere l'elemento al documento.

Compatibilità dei browser

Il metodo appendChild() è completamente supportato da tutti i browser:

Valore del parametro

Dettagli tecnici

Più esempi

Crea un elemento <p> e aggiungilo a un elemento <div>:

var para = document.createElement("p"); // Crea un nodo <p>
var txt = document.createTextNode("Questo è un paragrafo."); // Crea un nodo di testo
para.appendChild(txt); // Aggiungi il testo al <p>
document.getElementById("demo").appendChild(para); // Aggiungi <p> a <div>

Crea un elemento <p> e aggiungilo alla fine del corpo del documento:

var para = document.createElement("p"); // Crea un nodo <p>
var txt = document.createTextNode("Questo è un paragrafo."); // Crea un nodo di testo
para.appendChild(txt); // Aggiungi il testo al <p>
document.body.appendChild(para);// Aggiungi <p> al corpo

Questo esempio sposta l'elemento dalla sua posizione corrente a una nuova posizione:

var elem = document.getElementById("myList2").lastElementChild;
document.getElementById("myList1").appendChild(elem);

Riferimenti correlati

Riferimento HTML DOM:nodeMetodo .hasChildNodes()

Riferimento HTML DOM:nodeMetodo .insertBefore()

Riferimento HTML DOM:nodeMetodo .removeChild()

Riferimento HTML DOM:nodeMetodo .replaceChild()

Riferimento HTML DOM:Metodo document.createElement()

Riferimento HTML DOM:Metodo document.createTextNode()

Riferimento HTML DOM:Metodo document.adoptNode()

Riferimento HTML DOM:Metodo document.importNode()

Oggetto Elemento HTML DOM