La proprietà innerHTML in JavaScript
In JavaScript, innerHTML è una proprietà degli elementi del DOM (Document Object Model) che mi consente di ottenere o modificare il contenuto HTML di un elemento.
A] Per ottenere il contenuto HTML di un elemento:
let variabile = elemento.innerHTML;
Dove elemento è un riferimento a un oggetto del DOM.
Ad esempio, per ottenere il contenuto di un elemento <div> con l'ID "mioDiv", scrivo.
let contenutoHTML = document.getElementById("mioDiv").innerHTML;
B] Per modificare il contenuto HTML di un elemento
elemento.innerHTML = nuovoContenutoHTML;
Dove nuovoContenutoHTML è una stringa che contiene il nuovo contenuto HTML che vuoi inserire.
Ad esempio, per cambiare il contenuto dello stesso <div> menzionato prima, scrivo:
document.getElementById("mioDiv").innerHTML = "<p>Nuovo contenuto</p>";
In entrambi i casi è uno strumento potente e versatile per la manipolazione dinamica delle pagine web.
Nota. E' importante prestare attenzione alla sicurezza quando si utilizza innerHTML, per evitare vulnerabilità come gli attacchi XSS (Cross-Site Scripting). In particolar modo quando si tratta di inserire un contenuto fornito dall'utente. È consigliabile pulire sempre i contenuti per evitare l'inserimento di script dannosi.
Un esempio pratico
Per fare un esempio considero questa pagina web.
<html>
<body>
<div id="esempio">Ciao Mondo!</div>
<script>
// leggo il contenuto del div
let contenuto = document.getElementById('esempio').innerHTML;
// stampo il contenuto della variabile
console.log(contenuto);
// modifico il contenuto del div
document.getElementById('esempio').innerHTML = '<p>Hello World!</p>';
</script>
</body>
</html>
In questo script accedo al contenuto HTML dell'elemento con id="esempio" e lo salvo in una variabile.
Poi stampo il suo contenuto nella console e, infine, modifico il contenuto nell'elemento sempre usando la proprietà innerHTML
Il risultato sullo schermo è il seguente:
Hello World!
Ciao Mondo!
La prima riga è il risultato della modifica al div che ho fatto tramite la proprietà innerHTML.
La seconda riga è, invece, il contenuto della variabile stampato sullo schermo tramite document.Write().
E così via.
