Come già saprai attraverso JavaScript è possibile aggiungere e rimuovere nodi alla pagina HTML, in questo breve articolo vedrai come è facile aggiungere un nuovo tag all’interno della tua pagina.

Abbiamo visto come è possibile aggiungere codice HTML con i metodi append() e prepend() con jQuery, ora vedremo come ottenere lo stesso risultato con JavaScript.

In questo articolo, grazie agli esempio, scoprirai come aggiungere un nuovo tag utilizzando tre semplici metodi JavaScript:

• createNode()
• createTextNode()
• appendChild()

supponi di avere il seguente div, a cui hai assignato l’id mioDiv:

<div id="mioDiv">

</div>

e di voler aggiungere al suo interno un paragrafo contente del testo utilizzando javascript.

Non dimenticare di inserire questo codice all’interno del tag script.

//per prima cosa memorizziamo l'elemento su cui vogliamo 
//lavorare in una variabile
let element = document.getElementById("mioDiv");

//ora creiamo un nuovo nodo con il tag che
//vogliamo aggiungere
let par = document.createElement("p");

//ora creiamo un altro elemento che contiente il testo
let txt= document.createTextNode("io apparirò nel paragrafo");

//a questo punto usiamo appendChild() 
//per aggiungere il teso al paragrafo
par.appendChild(txt);

//e appendiamo il paragrafo nel div
element.appendChild(par);

Il codice HTML che otterremo dopo l’esecuzione del codice javascript sarà:

<div id="mioDiv">
     <p>io apparirò nel paragrafo</p>
</div>

Se non ti va di scrivere tutto questo codice puoi fare copia e incolla di questa funzione javascript, che farà tutto il lavoro al posto tuo:

function appendNode(parentTag,tag,text){
    let newTag = document.createElement(tag);
    let newText = document.createTextNode(text);
    newTag.appendChild(newText);
    parentTag.appendChild(newTag);
}

Questa funzione prende tre parametri, il nodo a cui appendere, il tag da aggingere e testo da inserire all’interno del tag.

Ad esempio per ottenere lo stesso risultato dell’esempio javascript precedente ti basterà scrivere:

let element = document.getElementById("mioDiv");
appendNode(element,'p','io sono aggiunto dalla funzione');

Quando utilizzi il metodo appendChild devi tener presente che il nuovo nodo verrà aggiunto per ultimo, dopo altri eventuali nodi contenuti nel tag genitore.

Scarica il file di esempio.