Alterando conteúdo de texto: mudando o que está escrito na página

Aprenda a modificar o texto dentro de qualquer elemento HTML.

Agora que você já sabe selecionar elementos no DOM, chegou a hora de fazer uma das coisas mais visíveis no JavaScript: trocar textos na tela.

Pense em uma plaquinha de loja.
O HTML cria a plaquinha.
O JavaScript troca o que está escrito nela.

Por que isso é útil?

Alterar texto é base para várias interações, como:

  • mostrar mensagens de sucesso ou erro
  • atualizar título da página
  • exibir resultado de cálculo
  • responder a cliques do usuário
  • mudar conteúdo de botões e labels

Propriedade principal: textContent

A forma mais comum de alterar texto de um elemento é com textContent.

<h1 id="titulo">Título antigo</h1>

const titulo = document.getElementById("titulo");
titulo.textContent = "Título novo";

Pronto: o texto na tela muda na hora.

Lendo texto atual

Você também pode pegar o texto que já está no elemento:

const textoAtual = titulo.textContent;
console.log(textoAtual);

Exemplo prático com botão

<p id="mensagem">Bem-vindo!</p>
<button id="botao">Mudar mensagem</button>

const mensagem = document.getElementById("mensagem");
const botao = document.getElementById("botao");

botao.addEventListener("click", function() {
  mensagem.textContent = "Você clicou no botão!";
});

Cada clique atualiza o texto do parágrafo.

textContent x innerText (diferença rápida)

Ambos mudam texto, mas o mais recomendado para começar é textContent.

  • textContent: lê/altera texto bruto do elemento.
  • innerText: considera mais o que está visível/renderizado.

Na prática inicial, use textContent na maior parte dos casos.

Cuidado com innerHTML

innerHTML altera conteúdo como HTML, não apenas texto.

elemento.innerHTML = "<strong>Olá</strong>";

Isso pode ser útil em alguns cenários, mas para trocar texto simples, prefira textContent por clareza e segurança.

Atualizando texto com dados dinâmicos

<p id="contador">Cliques: 0</p>
<button id="mais">+1</button>

const contadorEl = document.getElementById("contador");
const mais = document.getElementById("mais");

let total = 0;

mais.addEventListener("click", function() {
  total += 1;
  contadorEl.textContent = "Cliques: " + total;
});

Aqui o texto muda conforme o valor da variável.

Boas práticas rápidas

  • Sempre selecione o elemento antes de alterar.
  • Verifique se ele existe (if (elemento)) para evitar erro.
  • Prefira textContent para texto puro.
  • Use mensagens claras para o usuário.

Resumo da lição

  • Alterar texto é uma das ações mais comuns no DOM.
  • A propriedade principal para isso é textContent.
  • Você pode ler e escrever texto de elementos facilmente.
  • Com eventos, o texto pode reagir ao que o usuário faz.
  • Para texto simples, textContent é a opção mais indicada.