createTextNode JavaScript

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:



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.

Lezione precedente: creare nuovi elementi nel DOM

Lezione successiva: aggiungere attributi negli elementi del DOM