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>
let conteudoParagrafoHTML = document.getElementById("paragrafo").innerHTML;
document.getElementById("conteudo").innerHTML = conteudoParagrafoHTML
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>
let texto = "Olá Mundo!!!";
document.getElementById("paragrafo").innerHTML = `<i>$</i>`;
document.getElementById("div").innerHTML = `<strong>$</strong>`;
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>
function mudarConteudo() {
document.getElementById("paragrafo").innerHTML = "O conteúdo foi alterado!";
}
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>
function deletarConteudo() {
document.getElementById("paragrafo").innerHTML = "";
}
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 |
