logo Dove iniziare Linguaggi Aiuto Blog
Home Dove iniziare Linguaggi Aiuto e Supporto Info e Blog

DOM e contenuto HTML

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à / MetodoDescrizione
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 innerHTMLtextContent?
Le proprietà innerHTML e textContent potrebbero sembrare uguali. Invece, ci sono alcune differenze importanti. 

La proprietà 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.

Tuttavia, 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>

Prova!Scegli l'opzione corretta tra quelle elencate.
<!-- Inserisci il testo: i tag HTML fanno parte del testo visibile -->
<p id="paragrafo"></p>

<script>
document.getElementById("paragrafo").______ = "Un testo pericoloso <script>";
</script>