Questa traduzione è incompleta. Collabora alla traduzione di questo articolo dall’originale in lingua inglese.

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

Nota: Se un <div>, <span>, o <noembed> nodo ha un nodo di testo figlio che include i caratteri (&), (<)o (>), innerHTMLrestituisce questi personaggi come entità HTML "&amp;", "&lt;"e "&gt;"rispettivamente. Utilizzare 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, utilizzare il metodo insertAdjacentHTML ().

Sintassi

const content = element .innerHTML;

element .innerHTML = htmlString ;

Valore

A DOMString contenente la serializzazione HTML dei discendenti dell'elemento. L'impostazione del valore innerHTMLrimuove tutti i discendenti dell'elemento e li sostituisce con i nodi costruiti analizzando l'HTML fornito nella stringa htmlString .

eccezioni

SyntaxError
È stato effettuato un tentativo di impostare il valore innerHTMLdell'utilizzo di una stringa che non è HTML correttamente formato.
NoModificationAllowedError
È stato effettuato un tentativo di inserire l'HTML in un nodo il cui genitore è un Documento.

Note di utilizzo

La innerHTMLproprietà può essere utilizzata per esaminare l'origine HTML corrente della pagina, comprese le eventuali modifiche apportate dal momento in cui la pagina è stata inizialmente caricata.

Leggere i contenuti HTML di un elemento

La lettura innerHTMLfa sì che l'agente utente serializzi il frammento 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.

Nota: il frammento 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 innerHTMLconsente 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 = "";

This example fetches the document's current HTML markup and replaces the "<" characters with the HTML entity "&lt;", thereby essentially converting the HTML into raw text. This is then wrapped in a <pre> element. Then the value of innerHTML is changed to this new string. As a result, the document contents are replaced with a display of the page's entire source code.

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

Operational details

What exactly happens when you set value of innerHTML? Doing so causes the user agent to follow these steps:

  1. The specified value is parsed as HTML or XML (based on the document type), resulting in a DocumentFragment object representing the new set of DOM nodes for the new elements.
  2. If the element whose contents are being replaced is a <template> element, then the <template> element's content attribute is replaced with the new DocumentFragment created in step 1.
  3. For all other elements, the element's contents are replaced with the nodes in the new DocumentFragment.

Security considerations

It is not uncommon to see innerHTML used to insert text into a web page. There is potential for this to become an attack vector on a site, creating a potential security risk.

const name = "John";
// assuming 'el' is an HTML DOM element
el.innerHTML = name; // harmless in this case

// ...

name = "<script>alert('I am John in an annoying alert!')</script>";
el.innerHTML = name; // harmless in this case

Although this may look like a cross-site scripting attack, the result is harmless. HTML5 specifies that a <script> tag inserted with innerHTML should not execute.

However, there are ways to execute JavaScript without using <script> elements, so there is still a security risk whenever you use innerHTML to set strings over which you have no control. For example:

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

For that reason, it is recommended you not use innerHTML when inserting plain text; instead, use Node.textContent. This doesn't parse the passed content as HTML, but instead inserts it as raw text.

Warning: If your project is one that will undergo any form of security review, using innerHTML most likely will result in your code being rejected. For example, if you use innerHTML in a browser extension and submit the extension to addons.mozilla.org, it will not pass the automated review process.

Example

This example uses innerHTML to create a mechanism for logging messages into a box on a web page.

JavaScript

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

log("Logging mouse events inside this container...");

The log() function creates the log output by getting the current time from a Date object using toLocaleTimeString(), and building a string with the timestamp and the message text. Then the message is appended to the box with the class "log".

We add a second method that logs information about MouseEvent based events(such as mousedown, click, and mouseenter):

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

Then we use this as the event handler for a number of mouse events on the box that contains our log:

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

The HTML is quite simple for our example.

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

The <div> with the class "box" is just a container for layout purposes, presenting the contents with a box around it. The <div> whose class is "log" is the container for the log text itself.

CSS

The following CSS styles our example content.

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

Result

The resulting content looks like this. You can see output into the log by moving the mouse in and out of the box, clicking in it, and so forth.

Specification

Specification Status Comment
DOM Parsing and Serialization
The definition of 'Element.innerHTML' in that specification.
Working Draft Initial definition

Compatibilità con il browser

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet
Basic supportChrome Full support 1Edge Full support 12Firefox Full support 1IE Full support 4Opera Full support 7Safari Full support YesWebView Android Full support YesChrome Android Full support 18Edge Mobile Full support 12Firefox Android Full support 4Opera Android Full support YesSafari iOS Full support 1Samsung Internet Android Full support 1.0

Legend

Full support  
Full support

Guarda anche

Tag del documento e collaboratori

Hanno collaborato alla realizzazione di questa pagina: SphinxKnight, Daniele202
Ultima modifica di: SphinxKnight,