Dopo aver parlato degli attributi HTML con DOM, in questa lezione vediamo come modificare il contenuto HTML DOM tramite JavaScript.
Modificare il contenuto HTML permette di rendere un sito interattivo e dinamico. Ad esempio, può servire per visualizzare un errore durante la registrazione di un account quando i dati non sono stati inseriti correttamente.
I metodi disponibili
| Proprietà / Metodo | Descrizione |
innerHTML | Restituisce o imposta il contenuto di un elemento. |
textContent | Restituisce o imposta il contenuto testuale di un elemento. |
innerText | Restituisce o imposta il contenuto di testo di un elemento e gli elementi interni. |
write() | Sostituisce l'HTML di una pagina con un altro contenuto HTML. |
La proprietà innerHTML
La proprietà innerHTML consente di ottenere o impostare il contenuto HTML di un elemento nel DOM. Permette di aggiungere o modificare elementi HTML all'interno di un elemento specifico.
Sintassi: elemento.innerHTML.
<p id="paragrafo">JavaScript modifica l'HTML</p>
<script>
let paragrafo = document.getElementById("paragrafo");
alert(paragrafo.innerHTML); // Risultato: "JavaScript modifica l'HTML"
// Modificare il contenuto
paragrafo.innerHTML = "JavaScript ha modificato questo testo";
alert(paragrafo.innerHTML); // Risultato: "JavaScript ha modificato questo testo"
</script>Puoi anche utilizzare i metodi di accesso al DOM come document.getElementById() direttamente insieme alla proprietà: document.getElementById(id).innerHTML. Per semplicità, sono stati divisi nell'esempio di prima.
La proprietà textContent
A differenza di innerHTML, la proprietà textContent tratta il contenuto come testo semplice e non interpreta eventuali tag HTML al suo interno (che vengono ignorati).
Sintassi: elemento.textContent.
<p id="paragrafo">JavaScript <span>modifica</span> l'HTML</p>
<script>
let paragrafo = document.getElementById("paragrafo");
alert(paragrafo.textContent); // Risultato: "JavaScript modifica l'HTML"
// Modificare il contenuto
paragrafo.textContent = "JavaScript ha modificato questo testo";
alert(paragrafo.textContent); // Risultato: "JavaScript ha modificato questo testo"
</script>Qual è la differenza tra innerHTML e textContent?
Le proprietà innerHTML e textContent potrebbero sembrare uguali. Invece, ci sono alcune differenze importanti.
innerHTML permette di inserire all'interno di un elemento del codice HTML:document.getElementById("paragrafo").innerHTML = "<p class='text'>Testo</p>";Questa è una cosa che textContent non può fare, perché i tag HTML vengono trasformati in caratteri HTML validi, quindi diventano semplice testo visibile.
textContent è più sicuro: non permettendo di utilizzare codice HTML, gli utenti malintenzionati non possono usarlo per inserire degli script pericolosi all'interno del sito.La proprietà innerText
La proprietà innerText è simile a textContent, ma non tiene conto degli spazi.
Sintassi: elemento.innerText.
<p id="paragrafo">JavaScript <span>modifica</span> l'HTML</p>
<script>
let paragrafo = document.getElementById("paragrafo");
alert(paragrafo.innerText); // Risultato: "JavaScript modifica l'HTML"
// Modificare il contenuto
paragrafo.innerText = "JavaScript ha modificato questo testo";
alert(paragrafo.innerText); // Risultato: "JavaScript ha modificato questo testo"
</script>Il metodo write()
Il metodo document.write() permette di inserire testo o codice HTML direttamente nella pagina, sovrascrivendo tutti i contenuti HTML già presenti.
Sintassi: document.write(contenuto).
<p id="paragrafo">JavaScript modifica l'HTML</p>
<script>
document.write("JavaScript ha cancellato tutto e inserito questo testo con document.write");
</script>