path: root/files/it/web/api/element/innerhtml/index.html

---
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
---
<div>{{APIRef("DOM")}}</div>

<p><span class="seoSummary">La proprietà {{domxref("Element")}} <strong><code>innerHTML</code></strong> ottiene o imposta il markup HTML o XML contenuto all'interno dell'elemento.</span></p>

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

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

<h2 id="Sintassi">Sintassi</h2>

<pre class="syntaxbox">const <var>content</var> = <var>element</var>.innerHTML;

<var>element</var>.innerHTML = <var>htmlString</var>;
</pre>

<h3 id="Valore">Valore</h3>

<p>Una {{domxref("DOMString")}} contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore di <code>innerHTML</code> rimuove tutti i discendenti dell'elemento e li sostituisce con i nodi creati analizzando l'HTML fornito nella stringa <var>htmlString</var>.</p>

<h3 id="Eccezioni">Eccezioni</h3>

<dl>
 <dt><code>SyntaxError</code></dt>
 <dd>È stato effettuato un tentativo di impostare il valore di <code>innerHTML</code> utilizzando una stringa che non è HTML correttamente formato.</dd>
 <dt><code>NoModificationAllowedError</code></dt>
 <dd>È stato effettuato un tentativo di inserire l'HTML in un nodo il cui padre è {{domxref("Document")}}.</dd>
</dl>

<h2 id="Note_di_utilizzo">Note di utilizzo</h2>

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

<h3 id="Leggere_i_contenuti_HTML_di_un_elemento">Leggere i contenuti HTML di un elemento</h3>

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

<pre class="brush: js">let contents = myElement.innerHTML;</pre>

<p>Questo ti permette di guardare il markup HTML dei nodi di contenuto dell'elemento.</p>

<div class="note">
<p><strong>Note:</strong> 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.</p>
</div>

<h3 id="Sostituzione_del_contenuto_di_un_elemento">Sostituzione del contenuto di un elemento</h3>

<p>L'impostazione del valore di <code>innerHTML</code> consente di sostituire facilmente i contenuti esistenti di un elemento con nuovi contenuti.</p>

<p>Ad esempio, è possibile cancellare l'intero contenuto di un documento cancellando il contenuto dell'attributo {{domxref("Document.body", "body")}} del documento:</p>

<pre class="brush: js">document.body.innerHTML = "";</pre>

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

<pre class="brush: js">document.documentElement.innerHTML = "&lt;pre&gt;" +
         document.documentElement.innerHTML.replace(/&lt;/g,"&amp;lt;") +
            "&lt;/pre&gt;";</pre>

<h4 id="Dettagli_operativi">Dettagli operativi</h4>

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

<ol>
 <li>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.</li>
 <li>Se l'elemento il cui contenuto viene sostituito è un elemento {{HTMLElement("template")}} l'attributo <code>&lt;template&gt;</code> dell'elemento {{domxref("HTMLTemplateElement.content", "content")}} viene sostituito con il nuovo <code>DocumentFragment</code> creato nel passaggio 1.</li>
 <li>Per tutti gli altri elementi, i contenuti dell'elemento vengono sostituiti con i nodi nel nuovo <code>DocumentFragment</code>.</li>
</ol>

<h3 id="Considerazioni_sulla_sicurezza">Considerazioni sulla sicurezza</h3>

<p>Non è raro vedere <code>innerHTML</code> 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.</p>

<pre class="brush: js">const name = "John";
// supponiamo che 'el' sia un elemento DOM HTML
el.innerHTML = name; // innocuo in questo caso

// ...

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

<p>Sebbene possa sembrare un attacco {{interwiki("wikipedia", "cross-site scripting")}} il risultato è innocuo. HTML5 specifica che un tag {{HTMLElement("script")}} inserito con <code>innerHTML</code> <a href="https://www.w3.org/TR/2008/WD-html5-20080610/dom.html#innerhtml0">non deve essere eseguito</a>.</p>

<p>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 <code>innerHTML</code> per impostare le stringhe su cui non si ha il controllo. Per esempio:</p>

<pre class="brush: js">const name = "&lt;img src='x' onerror='alert(1)'&gt;";
el.innerHTML = name; // mostra l'alert</pre>

<p>Per questo motivo, si consiglia di non utilizzare <code>innerHTML</code> 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.</p>

<div class="warning">
<p><strong>Warning:</strong> Se il tuo progetto è uno che subirà alcuna forma di revisione della sicurezza, utilizzando <code>innerHTML</code> molto probabilmente il tuo codice verrà rifiutato. Ad esempio, <a href="https://wiki.mozilla.org/Add-ons/Reviewers/Guide/Reviewing#Step_2:_Automatic_validation">se utilizzi <code>innerHTML</code></a> in <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions">un'estensione del browser</a> e si invia l'estensione a <a href="https://addons.mozilla.org/">addons.mozilla.org</a>, non verrà passato il processo di revisione automatica.</p>
</div>

<h2 id="Esempio">Esempio</h2>

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

<h3 id="JavaScript">JavaScript</h3>

<pre class="brush: js">function log(msg) {
  var logElem = document.querySelector(".log");

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

log("Registrazione degli eventi del mouse in questo contenitore...");
</pre>

<p>La funzione <code>log()</code> 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 <code>"log"</code>.</p>

<p>Aggiungiamo un secondo metodo che registra le informazioni sugli eventi basati su {{domxref("MouseEvent")}} (come ad esempio {{event("mousedown")}}, {{event("click")}}, e {{event("mouseenter")}}):</p>

<pre class="brush: js">function logEvent(event) {
  var msg = "Event &lt;strong&gt;" + event.type + "&lt;/strong&gt; at &lt;em&gt;" +
            event.clientX + ", " + event.clientY + "&lt;/em&gt;";
  log(msg);
}</pre>

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

<pre class="brush: js">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);</pre>

<h3 id="HTML">HTML</h3>

<p>L'HTML è abbastanza semplice per il nostro esempio.</p>

<pre class="brush: html">&lt;div class="box"&gt;
  &lt;div&gt;&lt;strong&gt;Log:&lt;/strong&gt;&lt;/div&gt;
  &lt;div class="log"&gt;&lt;/div&gt;
&lt;/div&gt;</pre>

<p>Il {{HTMLElement("div")}} con la classe <code>"box"</code> è solo un contenitore per scopi di layout, presentando il contenuto con una scatola attorno ad esso. Il <code>&lt;div&gt;</code> la cui classe è <code>"log"</code> è il contenitore per il testo del log stesso.</p>

<h3 id="CSS">CSS</h3>

<p>I seguenti stili CSS del nostro contenuto di esempio.</p>

<pre class="brush: css">.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;
}</pre>

<h3 id="Risultato">Risultato</h3>

<p>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.</p>

<p>{{EmbedLiveSample("Esempio", 640, 350)}}</p>

<h2 id="Specifiche">Specifiche</h2>

<table class="standard-table">
 <thead>
  <tr>
   <th scope="col">Specifica</th>
   <th scope="col">Stato</th>
   <th scope="col">Commento</th>
  </tr>
 </thead>
 <tbody>
  <tr>
   <td>{{SpecName('DOM Parsing', '#dom-element-innerhtml', 'Element.innerHTML')}}</td>
   <td>{{Spec2('DOM Parsing')}}</td>
   <td>Definizione iniziale</td>
  </tr>
 </tbody>
</table>

<h2 id="Compatibilità_con_i_browser">Compatibilità con i browser</h2>



<p>{{Compat("api.Element.innerHTML")}}</p>

<h2 id="Vedi_anche">Vedi anche</h2>

<ul>
 <li>{{domxref("Node.textContent")}} e {{domxref("Node.innerText")}}</li>
 <li>{{domxref("Element.insertAdjacentHTML()")}}</li>
 <li>Parsificare HTML in un albero del DOM: {{domxref("DOMParser")}}</li>
 <li>Serializzare di XML o HTML in un albero del DOM: {{domxref("XMLSerializer")}}</li>
</ul>