Mudar o texto de um span usando JavaScript

Neste artigo você vai aprender a como mudar o texto de um span usando JavaScript, com apenas uma linha de código!

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

Para mudar o texto de um span será necessário duas coisas:

1. Selecionar o elemento através do DOM;
2. Alterar a propriedade textContent;

E como no enunciado: tudo isso pode ser feito com apenas uma linha

Veja o código necessário:

document.querySelector('#my-span').textContent = "Mudou o texto!";

A propriedade textContent tem como função alterar o texto de um elemento no HTML

Então com a linha de código acima estamos alterando o texto de algum span no nosso código

Selecionamos ele através de querySelector, que é simpes, pois basta colocar o seletor de CSS da tag e pronto, teremos um elemento selecionado

Esta função lembra muito a seleção de elementos pelo jQuery

Formação Recomendada

Formação Claude Code

Domine Claude Code do absoluto zero até o avançado

• 120 aulas
• 4 projetos
• 9h 45min

Conhecer formação

Conclusão

Neste artigo você aprendeu a mudar o texto de um span usando JavaScript

Basicamente precisamos selecionar o elemento e depois alterar a propriedade textContent com o texto que vamos substituir o texto original

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!

Fala aí, e se tu não quiser só o texto puro?

É aqui que muita gente se enrola, então bora separar as três propriedades

textContent troca todo o conteúdo de texto do elemento, inclusive o que estiver escondido por CSS, e não interpreta tag HTML (se tu jogar <b>oi</b> ele mostra a tag na tela como texto mesmo)

innerText é parecido, mas respeita o estilo da página: texto marcado como display:none não vem junto, e ele considera a renderização visível

innerHTML já é outro nível: ele INTERPRETA o que tu passar como HTML de verdade

document.querySelector(‘#my-span’).innerHTML = ‘<b>Mudou em negrito!</b>’

Se liga: usar innerHTML com texto que veio do usuário é perigoso, porque abre porta pra injeção de código

Pra só trocar texto, textContent é o mais seguro e o mais rápido =)

O querySelector não é o único jeito de pegar o elemento

Se o teu span tem um id, dá pra usar o getElementById, que é bem direto:

document.getElementById(‘my-span’).textContent = ‘Mudou o texto!’

Repara numa diferença boba mas que já ferrou muita gente: no getElementById tu passa só o nome do id, SEM a cerquilha (#)

Já no querySelector tu passa o seletor de CSS completo, com o # na frente

Trocou um pelo outro? O elemento vem null e o texto não muda

Os dois resolvem o mesmo problema, escolhe o que combinar com o teu código

Até agora a gente trocou o texto de UM span

Mas e quando tu tem vários na página e quer mudar todos de uma vez?

Aí o querySelector sozinho não serve, porque ele pega só o primeiro que encontrar

Pra pegar todos, usa querySelectorAll com uma classe em comum e roda um forEach:

document.querySelectorAll(‘.meu-span’).forEach(function(el) { el.textContent = ‘Todos mudaram!’ })

O querySelectorAll devolve uma lista de elementos, e o forEach passa em cada um trocando o textContent

Massa, né? Mesmo raciocínio, só que em lote

Dá pra mudar o texto de um span sem id?

Dá tranquilo

Basta usar qualquer seletor de CSS válido no querySelector: uma classe (.minha-classe), o próprio nome da tag ou um atributo

O id é só o caminho mais direto quando o elemento é único

Por que meu textContent não está funcionando?

Na grande maioria das vezes é porque o elemento veio null

Isso acontece quando o seletor está errado (esqueceu o # no querySelector, ou botou o # no getElementById) ou quando o script rodou ANTES do HTML carregar

Coloca o script no fim do body ou espera o carregamento da página e testa de novo

Qual a diferença de mudar texto com JavaScript puro e com jQuery?

O resultado é o mesmo, muda a escrita

No jQuery tu faria algo tipo $(‘#my-span’).text(‘Mudou’), que lembra bastante o querySelector

Mas hoje o JavaScript puro já resolve isso numa linha, sem precisar carregar biblioteca nenhuma