Artigos HTML e CSS 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

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 <p>, incluindo as tags HTML.

Desse modo, o valor armazenado na variável conteudoParagrafoHTML será: <i>DevMedia</i> 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>${texto}</i>`;
  document.getElementById("div").innerHTML = `<strong>${texto}</strong>`;
Código 4. Código JavaScript

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

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

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

Visualmente essa ação dá a impressão de que o conteúdo do elemento <p> 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
Sim Sim Sim Sim Sim Sim