Element.innerHTML

La proprietà Element innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

Per inserire l'HTML nel documento invece di sostituire il contenuto di un elemento, utilizza il metodo insertAdjacentHTML().

const content = element.innerHTML;

element.innerHTML = htmlString;

Una DOMString contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di innerHTML rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa htmlString.

SyntaxError

È stato effettuato un tentativo di impostare il valore di innerHTML utilizzando una stringa che non è HTML correttamente formato.

NoModificationAllowedError

È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è Document.

La proprietà innerHTML può essere utilizzata per esaminare il codice sorgente HTML corrente della pagina, comprese le eventuali modifiche apportate da quando la pagina è stata inizialmente caricata.

La lettura di innerHTML fa sì che l'user agent serializzi il fragment HTML o XML composto dai discendenti di elment. La stringa risultante viene restituita.

let contents = myElement.innerHTML;

Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.

L'impostazione del valore di innerHTML consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.

Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo body del documento:

document.body.innerHTML = "";

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "<", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento <pre> (en-US) element. Quindi il valore di innerHTML viene modificato in questa nuova stringa. Di conseguenza, il contenuto del documento viene sostituito con una visualizzazione dell'intero codice sorgente della pagina.

document.documentElement.innerHTML = "<pre>" +
         document.documentElement.innerHTML.replace(/</g,"&lt;") +
            "</pre>";

Dettagli operativi

Cosa succede esattamente quando imposti il valore di innerHTML? In questo modo, l'user agent deve seguire questi passaggi:

1. Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto DocumentFragment (en-US) che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
2. Se l'elemento il cui contenuto viene sostituito è un elemento <template> (en-US) l'attributo <template> dell'elemento content (en-US) viene sostituito con il nuovo DocumentFragment creato nel passaggio 1.
3. Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo DocumentFragment.

Non è raro vedere innerHTML utilizzato per inserire del testo in una pagina web. C'è la possibilità che questo diventi un vettore di attacco su un sito, creando un potenziale rischio per la sicurezza.

const name = "John";
// supponiamo che 'el' sia un elemento DOM HTML
el.innerHTML = name; // innocuo in questo caso

// ...

name = "<script>alert('Sono John in una noiosa allerta!')</script>";
el.innerHTML = name; // innocuo in questo caso

Sebbene possa sembrare un attacco cross-site scripting il risultato è innocuo. HTML5 specifica che un tag <script> (en-US) inserito con innerHTML non deve essere eseguito.

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi <script> (en-US), quindi c'è ancora un rischio per la sicurezza ogni volta che utilizzi innerHTML per impostare le stringhe su cui non si ha il controllo. Per esempio:

const name = "<img src='x' onerror='alert(1)'>";
el.innerHTML = name; // mostra l'alert

Per questo motivo, si consiglia di non utilizzare innerHTML quando si inserisce testo normale; invece, usa Node.textContent. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

In questo esempio viene utilizzato innerHTML per creare un meccanismo per la registrazione dei messaggi in una casella in una pagina Web.

function log(msg) {
  var logElem = document.querySelector(".log");

  var time = new Date();
  var timeStr = time.toLocaleTimeString();
  logElem.innerHTML += timeStr + ": " + msg + "<br/>";
}

log("Registrazione degli eventi del mouse in questo contenitore...");

La funzione log() crea l'output del log ottenendo l'ora corrente da un oggetto Date utilizzando toLocaleTimeString() (en-US), e creando una stringa con il timestamp e il testo del messaggio. Quindi il messaggio viene aggiunto al box con classe "log".

Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su MouseEvent (en-US) (come ad esempio mousedown (en-US), click (en-US), e mouseenter (en-US)):

function logEvent(event) {
  var msg = "Event <strong>" + event.type + "</strong> at <em>" +
            event.clientX + ", " + event.clientY + "</em>";
  log(msg);
}

Quindi usiamo questo come gestore di eventi per un numero di eventi del mouse sulla casella che contiene il nostro registro:

var boxElem = document.querySelector(".box");

boxElem.addEventListener("mousedown", logEvent);
boxElem.addEventListener("mouseup", logEvent);
boxElem.addEventListener("click", logEvent);
boxElem.addEventListener("mouseenter", logEvent);
boxElem.addEventListener("mouseleave", logEvent);

L'HTML è abbastanza semplice per il nostro esempio.

<div class="box">
  <div><strong>Log:</strong></div>
  <div class="log"></div>
</div>

Il <div> con la classe "box" è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <div> la cui classe è "log" è il contenitore per il testo del log stesso.

I seguenti stili CSS del nostro contenuto di esempio.

.box {
  width: 600px;
  height: 300px;
  border: 1px solid black;
  padding: 2px 4px;
  overflow-y: scroll;
  overflow-x: auto;
}

.log {
  margin-top: 8px;
  font-family: monospace;
}

Il contenuto risultante assomiglia a questo. È possibile visualizzare l'output nel registro spostando il mouse dentro e fuori dalla scatola, facendo click su di esso e così via.

• Node.textContent e Node.innerText (en-US)
• Element.insertAdjacentHTML()
• Parsificare HTML in un albero del DOM: DOMParser (en-US)
• Serializzare di XML o HTML in un albero del DOM: XMLSerializer (en-US)