Continuiamo il nostro tutorial utilizzando il metodo createTextNode in JavaScript, ovvero il metodo che ci consente di inserire del testo in un nodo.
Infatti, dopo aver creato un nuovo elemento oppure su un elemento già esistente, si può avere la necessità di inserire del testo al suo interno.
Per fare ciò si può utilizzare ad esempio il metodo createTextNode() di JavaScript, dove all'interno delle parentesi tonde specifico il nuovo testo da inserire.
La sintassi di questo metodo è la seguente:
element.createTextNode()
createTextNode JavaScript - first example
In questo esempio creeremo un nuovo paragrafo, dove all'interno inseriremo un testo a piacere. Il nuovo paragrafo sarà creato al click sul pulsante.
Provatelo cliccando sul pulsante sotto:
Procedimento
Spieghiamo dettagliatamente il procedimento per realizzare questo esempio.
Nel codice HTML inseriamo come prima un pulsante 'Aggiungi nuovo paragrafo' e sotto di esso aggiungiamo un livello (div), dove apparirà il nuovo paragrafo generato.
La nostra funzione aggiungi() svolgerà delle semplicissime istruzioni:
- dapprima creerà il nuovo elemento paragrafo,
- poi scriverà del testo all'interno di questo paragrafo utilizzando il metodo createTextNode di JavaScript
- e poi utilizzanado il metodo appendChild() aggiungerà questi contenuti appena creati nel punto desiderato. Il punto desiderato si ottiene grazie al metodo getElementById.
Ecco quindi il codice html per creare l'esempio:
<button onclick="aggiungi()">Aggiungi paragrafo</button>
<div id="testo"></div>
Ed il codice JavaScript:
50 Algoritmi per imparare JavaScript
Una guida step by step per imparare JavaScript con esercizi svolti.
function aggiungi() {
var paragrafo= document.createElement("p");
var testo = document.createTextNode("Coding Creativo");
paragrafo.appendChild(testo);
document.getElementById("testo").appendChild(paragrafo);
}
Conclusione
Quindi, riassumendo in questa lezione abbiamo imparato a creare elementi nel DOM con JavaScript e ad utilizzare i metodi createElement(), createTextNode() e appendChild().
Nella prossima lezione continueremo ancora a parlare del DOM con JavaScript.
Alcuni link utili
Come trovare immagini per il sito web
Quali colori scegliere per un sito web
Quali font scegliere per un sito web