Proprietà innerHTML dell'Elemento HTML DOM

Definizione e uso

innerHTML Imposta o restituisce il contenuto HTML dell'elemento (HTML interno).

Vedi anche:

Proprietà innerText

Proprietà textContent

Esempio

Esempio 1

Ottieni il contenuto HTML dell'elemento con id="myP":

let html = document.getElementById("myP").innerHTML;

Prova tu stesso

Esempio 2

Modifica il contenuto HTML dell'elemento con id="demo":

document.getElementById("demo").innerHTML = "I have changed!";

Prova tu stesso

Esempio 3

Ottieni il contenuto HTML dell'elemento <ul> con id="myList":

let html = document.getElementById("myList").innerHTML;

Prova tu stesso

Esempio 4

Elimina il contenuto HTML dell'elemento <p> con id="demo":

element.innerHTML = "";

Prova tu stesso

Esempio 5

Modifica il contenuto HTML di due elementi:

let text = "Hello Dolly.";
document.getElementById("myP").innerHTML = text;
document.getElementById("myDIV").innerHTML = text;

Prova tu stesso

Esempio 6

Ripeti il contenuto HTML dell'elemento:

element.innerHTML += element.innerHTML;

Prova tu stesso

Esempio 7

Modifica il contenuto HTML e l'URL del link:

element.innerHTML = "W3School";
element.href = "";

Prova tu stesso

Sintassi

Restituisce l'attributo innerHTML:

element.innerHTML

Imposta l'attributo innerHTML:

element.innerHTML = text

Valore dell'attributo

Valore Descrizione
Stringa. Contenuto HTML.

Valore di ritorno

Tipo Descrizione
Stringa Il contenuto HTML dell'elemento.

Differenze tra innerHTML, innerText e textContent

L'attributo innerText restituisce:

Restituisce solo il contenuto testuale di un elemento e di tutti i suoi figli, senza spazi e tag HTML nascosti CSS, eccetto gli elementi <script> e <style>.

L'attributo innerHTML restituisce:

Il contenuto testuale di un elemento, inclusi tutti gli spazi e i tag HTML interni.

L'attributo textContent restituisce:

Il contenuto testuale di un elemento e di tutti i suoi discendenti, con spazi e testo nascosto CSS, ma senza etichette.

Esempio HTML

<p id="myP">   Questo elemento ha uno spazio extra     e contiene <span>un elemento span</span>.</p>

Esempi JavaScript

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

Prova tu stesso

Nell'esempio sopra:

L'attributo innerText restituisce:

Questo elemento ha uno spazio extra e contiene un elemento span.

L'attributo innerHTML restituisce:

   Questo elemento ha uno spazio extra e contiene <span>un elemento span</span>.

L'attributo textContent restituisce:

   Questo elemento ha uno spazio extra e contiene un elemento span.

Supporto del browser

Tutti i browser supportano elemento.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Supporto Supporto Supporto Supporto Supporto Supporto