DOM Element.innerHTML: como alterar um conte�do de uma tag HTML

O que � o innerHTML?

O innerHTML � uma propriedade do Element que define ou retorna o conte�do HTML de um elemento.

Essa propriedade geralmente � escrita no DOM (Document Object Model), atrav�s do JavaScript.

Como utilizar o innerHTML?

O innerHTML pode ser usado para receber o conte�do de um elemento HTML ou para definir um novo conte�do para ele.

Para isso, podemos utilizar a sintaxe do DOM (document.getElement) para realizar essas aç�es atrav�s do JavaScript.

innerHTML: na pr�tica


  // Troca o conte�do do elemento body por uma string vazia
  document.body.innerHTML = � �;

Sintaxe


  //innerHTML utilizado para receber o conte�do de um elemento HTML:
  let conteudo = document.element.innerHTML


  //innerHTML utilizado para adicionar um conte�do a um elemento HTML:
  document.element.innerHTML = conteudo

Exemplos de uso do innerHTML

Exemplo 1

Nos C�digos 1 e 2 temos um exemplo que demonstra o innerHTML aplicado para obter o conte�do de um elemento HTML e logo depois adicionar este mesmo conte�do em outro elemento HTML.


  <body>
    <h1>Exemplo de uso da propriedade innerHTML</h1>
    <p id="paragrafo"'><i>Devmedia.</i></p>
    <p>O conte�do do par�grafo acima �: <strong id="conteudo"></strong></p>
  </body>

C�digo 1. C�digo HTML


let conteudoParagrafoHTML = document.getElementById("paragrafo").innerHTML;
document.getElementById("conteudo").innerHTML = conteudoParagrafoHTML

C�digo 2. C�digo JavaScript

See the Pen Exemplo 1 - innerHTML by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que ap�s selecionarmos o elemento atrav�s do ID utilizamos a propriedade innerHTML para que a vari�vel conteudoParagrafoHTML receba o conte�do do elemento selecionado.

O conte�do acessado pelo innerHTML inclui tudo dentro do elemento , incluindo as tags HTML.

Desse modo, o valor armazenado na vari�vel conteudoParagrafoHTML ser�: DevMedia e atrav�s dessa vari�vel podemos adicionar esse conte�do dentro de outro elemento HTML, como pode ser visto no C�digo 2.

Exemplo 2

Nos C�digos 3 e 4 temos um exemplo que mostra o innerHTML utilizado para alterar o conte�do de dois elementos simultaneamente.


  <body>
    <h1>Exemplo de uso da propriedade innerHTML</h1>
    <p id="paragrafo">Isso � um par�grafo.</p>
    <div id="div">Isso � uma div.</div>
  </body>

C�digo 3. C�digo HTML


  let texto = "Ol� Mundo!!!";
  document.getElementById("paragrafo").innerHTML = `<i>$</i>`;
  document.getElementById("div").innerHTML = `<strong>$</strong>`;

C�digo 4. C�digo JavaScript

See the Pen Exemplo 3 - innerHTML by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que os conte�dos dos elementos HTML (par�grafo e div) ser�o alterados simultaneamente de forma autom�tica.

Veja nas linhas 2 e 3 do C�digo 4 que tamb�m podemos adicionar outros elementos HTML (tags), dentro do elemento selecionado. Esta aç�o pode ser realizada com o uso de Template Strings.

Exemplo 3

Nos C�digos 5 e 6 temos um exemplo que demonstra o innerHTML aplicado em uma funç�o JS com o intuito de alterar o conte�do de um elemento HTML ap�s o clique no bot�o.


  <body>
    <h1>Exemplo de uso da propriedade innerHTML</h1>
    <button onclick="mudarConteudo()">Clique aqui para mudar o conte�do do par�grafo abaixo</button>
    <p id="paragrafo">Este � o conte�do padr�o!</p>
  </body>

C�digo 5. C�digo HTML


  function mudarConteudo() {
    document.getElementById("paragrafo").innerHTML = "O conte�do foi alterado!";
  }

C�digo 6. C�digo JavaScript

See the Pen Exemplo 3 - innerHTML by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que neste exemplo o innerHTML foi aplicado para alterar o conte�do padr�o do par�grafo selecionado.

A alteraç�o do conte�do do par�grafo ser� realizada quando o bot�o for clicado.

Exemplo 4

Nos C�digos 7 e 8 temos um exemplo que demonstra a utilizaç�o do innerHTML para �deletar� o conte�do de um elemento HTML.


  <body>
    <h1>Exemplo de uso da propriedade innerHTML</h1>
    <p id="paragrafo">Clique no bot�o abaixo para "deletar" o conte�do deste elemento HTML.</p>
    <button onclick="deletarConteudo()">Clique aqui</button>
  </body>

C�digo 7. C�digo HTML


  function deletarConteudo() {
    document.getElementById("paragrafo").innerHTML = "";
  }

C�digo 8. C�digo JavaScript

See the Pen Exemplo 4 - innerHTML by Wladimir Batista Castro (@wladimirrj) on CodePen.

Note que ao acionarmos a funç�o do C�digo 8 o innerHTML que encontra-se dentro da funç�o vai �deletar� o conte�do do elemento .

Visualmente essa aç�o d� a impress�o de que o conte�do do elemento foi deletado, mas na verdade o innerHTML simplesmente altera o conte�do do par�grafo.

Compatibilidade com navegadores

O innerHTML � compat�vel com todos os navegadores apresentados na tabela abaixo:

innerHTML	Chrome	IE	Edge	Firefox	Safari	Opera
innerHTML	Sim	Sim	Sim	Sim	Sim	Sim