Diferença entre innerHTML e innerText em JavaScript

Neste artigo você aprender a diferença entre innerHTML e innerText, que são métodos muito utilizados para manipulação de DOM em JavaScript

innerHTML lê e escreve HTML: o navegador interpreta as tags e renderiza a estrutura na página. innerText lê e escreve só o texto visível, ignora as tags e respeita o CSS (não retorna texto escondido), mas força o navegador a recalcular o layout na leitura. textContent lê e escreve todo o texto da marcação, inclusive o escondido, sem interpretar HTML e sem esse custo de recálculo, por isso é o mais leve. Resumo: pra texto puro, textContent é a opção mais rápida e segura; pra montar HTML, innerHTML resolve, mas atenção ao XSS quando o conteúdo vem do usuário.

Conteúdo também disponível em vídeo:

Fala programador(a), beleza? Bora aprender mais sobre DOM! 🙂

A diferença entre os dois métodos é bem clara e está no seu próprio nome

O método innerText, por exemplo, vai alterar o conteúdo de um elemento com apenas texto, ou seja, não podemos inserir HTML com este método

Veja um exemplo prático:

var el = document.querySelector("#teste");
el.innerText = "<div> Olá </div>";

Este código fará com que o texto “<div> Olá </div>“, seja inserido no elemento, ignorando a abertura e fechamento das tags de div

Formação Recomendada

Formação Vibe Coding

Do Prompt ao Produto: Crie Software Real com IA

• 474 aulas
• 20 projetos
• 39h 27min

Conhecer formação

Representação gráfica do exemplo:

Já no innerHTML teremos uma abordagem diferente, podemos alterar o conteúdo de um elemento no DOM inserindo texto e HTML

Então se utilizarmos este mesmo exemplo, porém com o método innerHTML:

var el = document.querySelector("#teste");
el.innerHTML = "<div> Olá </div>";

Teremos a interpretação  da tag div, e ela será convertida para HTML

A única representação será a que está como texto entre as tags

Podemos então concluir que quando o conteúdo a ser inserido é apenas de texto, vamos optar por innerText

Já se precisamos inserir e criar estruturas de HTML, optaremos pelo innerHTML

Conclusão

Neste artigo vimos a diferença entre innerHTML e innerText para alterar o DOM em JavaScript

A diferença principal é que innerText pode adicionar apenas texto aos elementos

Já innerHTML pode adicionar texto e tags HTML também, podendo estruturar uma página web

Então caso precisamos inserir apenas texto, podemos utilizar innerText, se também houver HTML na nossa inserção vamos de innerHTML

Confira também nosso catálogo de cursos gratuitos, com aulas semanais no YouTube

Bloco novo apresentando textContent como a terceira opção pra manipular texto no DOM

Existe um terceiro caminho que a maioria dos posts esquece: o textContent

Ele lê e escreve o texto exatamente como está na marcação, incluindo o conteúdo de elementos escondidos por CSS e até de tags como <script> e <style>

Diferente do innerText, ele não liga pro CSS, então não precisa recalcular o layout da página pra te devolver o texto

Na prática isso deixa o textContent mais leve e rápido que o innerText quando tu só quer pegar ou trocar texto puro

var el = document.querySelector(‘#teste’) el.textContent = ‘<div> Olá </div>’

Aqui o resultado é parecido com o innerText: as tags aparecem como texto na tela, o navegador não interpreta nada como HTML

Tabela (ou lista) comparando as três propriedades em três critérios: interpreta HTML?, enxerga o CSS?, e custo de desempenho

innerHTML: interpreta HTML sim (renderiza as tags), lê o conteúdo como HTML, é a única que monta estrutura na página

innerText: só texto, ignora as tags, respeita o CSS (não retorna texto de elemento escondido) e por causa disso força o navegador a recalcular o layout na hora da leitura

textContent: só texto, ignora as tags, ignora o CSS (retorna até texto escondido) e é a mais leve porque não recalcula nada

Veredito rápido: texto puro e performance, vai de textContent; precisa respeitar o que está visível na tela, innerText; precisa montar HTML de verdade, innerHTML

Um aviso importante que o post não faz: o innerHTML interpreta a string como HTML de verdade

Isso é ótimo pra montar estrutura, mas vira problema quando o conteúdo vem do usuário ou de uma fonte externa que tu não controla

Se alguém conseguir injetar HTML ou script por ali, o navegador pode acabar executando código malicioso: é o famoso XSS

Regra prática: se é só texto, use textContent, que não faz parsing de HTML e por isso é seguro por natureza

Guarde o innerHTML pra quando o HTML é seu, confiável, e tu realmente precisa renderizar as tags

Se tu precisa mesmo inserir HTML que veio de fora, o navegador já tem uma saída nativa: o método Element.setHTML()

Ele insere o HTML passando por um sanitizador embutido, que remove sozinho coisas perigosas como <script>, <iframe>, <embed>, <object> e atributos de manipulador de evento

Existe também o setHTMLUnsafe(), que faz a inserção SEM essa limpeza automática, então esse tu evita quando o conteúdo não é confiável

O setHTML() é recente: alcançou o status Baseline ‘newly available’ em 2025, ou seja, suporte novo nos principais navegadores, então vale checar a compatibilidade antes de depender só dele

Pra ver a diferença na marra, montei uma estrutura simples no VS Code: uma div com um id e um script carregando depois do HTML. Aí selecionei o elemento com querySelector e atribuí innerHTML com uma tag dentro, tipo um <h2>. Abri no navegador e o navegador renderizou aquilo como um H2 de verdade, formatação e tudo. Depois troquei pro innerText no mesmo elemento e o resultado mudou na hora: as tags apareceram escritas como texto puro na tela, o navegador não interpretou nada. É esse teste lado a lado que deixa a diferença óbvia: innerHTML manda o navegador interpretar, innerText manda ele só mostrar o texto.