Propriedade innerHTML do Elemento HTML DOM

Definição e uso

innerHTML Propriedade que define ou retorna o conteúdo HTML do elemento (HTML interno).

Veja também:

Propriedade innerText

Propriedade textContent

Exemplo

Exemplo 1

Obter o conteúdo HTML do elemento com id="myP":

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

Experimente pessoalmente

Exemplo 2

Alterar o conteúdo HTML do elemento com id="demo":

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

Experimente pessoalmente

Exemplo 3

Obter o conteúdo HTML do elemento <ul> com id="myList":

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

Experimente pessoalmente

Exemplo 4

Remover o conteúdo HTML do elemento <p> com id="demo":

element.innerHTML = "";

Experimente pessoalmente

Exemplo 5

Alterar o conteúdo HTML de dois elementos:

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

Experimente pessoalmente

Exemplo 6

Repetir o conteúdo HTML do elemento:

element.innerHTML += element.innerHTML;

Experimente pessoalmente

Exemplo 7

Alterar o conteúdo HTML e a URL do link:

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

Experimente pessoalmente

Sintaxe

Retornar a propriedade innerHTML:

element.innerHTML

Definir a propriedade innerHTML:

element.innerHTML = text

Valor do atributo

Valor Descrição
String. Conteúdo HTML.

Retorno

Tipo Descrição
String O conteúdo HTML do elemento.

Diferenças entre innerHTML, innerText e textContent

A propriedade innerText retorna:

Somente retorna o conteúdo de texto do elemento e todos seus descendentes, sem espaços em branco ocultos CSS e tags, exceto elementos <script> e <style>.

A propriedade innerHTML retorna:

O conteúdo de texto do elemento, incluindo todos os espaços em branco e tags HTML internas.

A propriedade textContent retorna:

O conteúdo de texto de todos os descendentes do elemento, com espaços em branco e texto oculto CSS, mas sem tags.

Exemplo HTML

<p id="myP">   Este elemento tem espaçamento extra     e contém <span>um elemento <span>span</span></span>.</p>

Exemplo JavaScript

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

Experimente pessoalmente

Neste exemplo acima:

A propriedade innerText retorna:

Este elemento tem espaçamento extra e contém um elemento <span>span</span>.

A propriedade innerHTML retorna:

   Este elemento tem espaçamento extra e contém <span>um elemento <span>span</span></span>.

A propriedade textContent retorna:

   Este elemento tem espaçamento extra e contém um elemento <span>span</span>.

O navegador suporta

Todos os navegadores suportam elemento.innerHTML:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Suporte Suporte Suporte Suporte Suporte Suporte