La proprietà Element
innerHTML
ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.
<div>
, <span>
, o <noembed>
ha un nodo di testo figlio che include i caratteri (&)
, (<)
, o (>)
, innerHTML
restituisce questi caratteri come entità HTML "&"
, "<"
e ">"
rispettivamente. Usa 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 insertAdjacentHTML()
.
Sintassi
const content = element.innerHTML; element.innerHTML = htmlString;
Valore
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.
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 è
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 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>
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,"<") +
"</pre>";
Dettagli operativi
Cosa succede esattamente quando imposti il valore di innerHTML
? In questo modo, l'user agent deve seguire questi passaggi:
- Il valore specificato viene analizzato come HTML o XML (in base al tipo di documento), risultando in un oggetto
DocumentFragment
che rappresenta il nuovo set di nodi del DOM per i nuovi elementi. - Se l'elemento il cui contenuto viene sostituito è un elemento
<template>
l'attributo<template>
dell'elementocontent
viene sostituito con il nuovoDocumentFragment
creato nel passaggio 1. - 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 cross-site scripting il risultato è innocuo. HTML5 specifica che un tag <script>
inserito con innerHTML
non deve essere eseguito.
Tuttavia, ci sono modi per eseguire JavaScript senza utilizzare gli elementi <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 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 Date
utilizzando 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 MouseEvent
(come ad esempio mousedown
, click
, e 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 <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.
Specifiche
Specifica | Stato | Commento |
---|---|---|
DOM Parsing and Serialization The definition of 'Element.innerHTML' in that specification. |
Working Draft | Definizione iniziale |
Compatibilità con i browser
BCD tables only load in the browser
Vedi anche
Node.textContent
eNode.innerText
Element.insertAdjacentHTML()
- Parsificare HTML in un albero del DOM:
DOMParser
- Serializzare di XML o HTML in un albero del DOM:
XMLSerializer