--- title: Element.innerHTML slug: Web/API/Element/innerHTML tags: - API - DOM - DOM Parsing - Element - Parsing HTML - Proprietà - Referenza - innerHTML translation_of: Web/API/Element/innerHTML ---
{{APIRef("DOM")}}

La proprietà {{domxref("Element")}} innerHTML ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.

Note: Se un {{HTMLElement("div")}}, {{HTMLElement("span")}}, o {{HTMLElement("noembed")}} ha un nodo di testo figlio che include i caratteri (&), (<), o (>), innerHTML restituisce questi caratteri come entità HTML "&amp;", "&lt;" e "&gt;" rispettivamente. Usa {{domxref("Node.textContent")}} per ottenere una copia non elaborata del contenuto di questi nodi di testo.

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

Sintassi

const content = element.innerHTML;

element.innerHTML = htmlString;

Valore

Una {{domxref("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.

Eccezioni

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 è {{domxref("Document")}}.

Note di utilizzo

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.

Leggere i contenuti HTML di un elemento

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.

Note: Il fragment HTML o XML restituito viene generato in base al contenuto corrente dell'elemento, pertanto è probabile che la marcatura e la formattazione del frammento restituito non corrispondano al markup della pagina originale.

Sostituzione del contenuto di un 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 {{domxref("Document.body", "body")}} del documento:

document.body.innerHTML = "";

Questo esempio recupera l'attuale markup HTML del documento e sostituisce i caratteri "<" con l'entità HTML "&lt;", convertendo in tal modo l'HTML in testo non elaborato. Questo è quindi avvolto in un elemento {{HTMLElement("pre")}} 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 {{domxref("DocumentFragment")}} che rappresenta il nuovo set di nodi del DOM per i nuovi elementi.
  2. Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <template> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} 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.

Considerazioni sulla sicurezza

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 {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con innerHTML non deve essere eseguito.

Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi {{HTMLElement("script")}}, 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 {{domxref("Node.textContent")}}. Questo non analizza il contenuto passato come HTML, ma invece lo inserisce come testo non elaborato.

Warning: Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando innerHTML molto probabilmente il tuo codice verrà rifiutato. Ad esempio, se utilizzi innerHTML in un'estensione del browser e si invia l'estensione a addons.mozilla.org, non verrà passato il processo di revisione automatica.

Esempio

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

JavaScript

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 {{jsxref("Date")}} utilizzando {{jsxref("Date.toLocaleTimeString", "toLocaleTimeString()")}}, 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 {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):

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);

HTML

L'HTML è abbastanza semplice per il nostro esempio.

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

Il {{HTMLElement("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.

CSS

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;
}

Risultato

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.

{{EmbedLiveSample("Esempio", 640, 350)}}

Specifiche

Specifica Stato Commento
{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}} {{Spec2('DOM Parsing')}} Definizione iniziale

Compatibilità con i browser

{{Compat("api.Element.innerHTML")}}

Vedi anche