Como inserir texto em uma div com JavaScript

Neste artigo você vai aprender a como inserir texto em uma div com JavaScript, com poucas linhas de código!

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

Primeiramente vamos precisar selecionar o elemento através do DOM, isso pode ser feito com o método querySelector

Para criar o texto é interessante utilizar o método createTextNode, é a forma mais correta de adicionar um nó com conteúdo

Por fim é necessário a aplicação do método appendChild na nossa div, contendo o texto como argumento

O código final é este:

var element = document.querySelector(".my-div");

var text = document.createTextNode("Some text here!");

element.appendChild(text);

Primeiramente selecionamos a div, neste caso ela possui uma classe de my-div, você deve alterar para o seletor do seu elemento

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

Com o querySelector utilizamos os mesmos seletores de CSS

Depois criamos o texto e utilzamos appendChild, como mencionado anteriormente

E assim temos um texto em uma div com JS puro!

Conclusão

Neste artigo você aprendeu a como inserir texto em uma div com JavaScript

A sequência de ações é: selecionar o elemento, criar um nó de texto e inserir o texto no elemento selecionado com appendChild

Esta é a maneira mais segura e que segue os bons padrões de JavaScript

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!

Inserindo texto com textContent:

O appendChild é o jeito mais seguro quando você quer ADICIONAR um nó de texto

Mas tem hora que você só quer jogar o texto ali e pronto, sem se preocupar com o que tinha antes

Nesse caso o textContent resolve em uma linha:

var element = document.querySelector(".my-div");

element.textContent = "Some text here!";

Se liga na diferença: o textContent SUBSTITUI todo o conteúdo da div

Se já tinha texto lá dentro, ele some

Já o appendChild vai empilhando, o que estava continua e o novo entra no final

Qual a diferença entre createTextNode, textContent e innerHTML?

Essa é a dúvida clássica, então bora separar

createTextNode + appendChild: cria um nó de texto e pendura na div, sem apagar nada

É o caminho mais explícito e o que segue os bons padrões do DOM

textContent: escreve texto puro e troca o conteúdo que estava lá

Simples e direto pra quando você controla o que vai entrar

innerHTML: interpreta o que você passar como HTML de verdade

Ou seja, <strong>oi</strong> vira negrito na tela, não vira texto

Tome cuidado! Se o conteúdo vem do usuário (input, URL, resposta de API), o innerHTML abre a porta pra injeção de script

Nesse cenário fica com createTextNode ou textContent, que tratam tudo como texto e não executam nada

Inserindo texto em várias divs de uma vez:

O querySelector pega só o PRIMEIRO elemento que casa com o seletor

Se a sua página tem várias divs com a mesma classe, você vai precisar do querySelectorAll e de um forEach:

var elements = document.querySelectorAll(".my-div");

elements.forEach(function (element) {
var text = document.createTextNode("Some text here!");

element.appendChild(text);
});

Repare que o createTextNode fica DENTRO do laço

Se criar o nó uma vez só e pendurar em todo mundo, o texto vai aparecer apenas na última div, porque o mesmo nó não vive em dois lugares ao mesmo tempo

Já me ferrei uma vez por causa disso haha

Perguntas frequentes sobre inserir texto em uma div com JavaScript:

Por que aparece o erro Cannot read properties of null?

Quando o querySelector não acha o elemento, ele devolve null

Aí o appendChild é chamado em cima de nada e o JavaScript reclama

Duas causas comuns: o seletor está errado (esqueceu o ponto da classe ou a cerquilha do id) ou o script roda antes do HTML existir na página

Coloque a tag script no final do body, ou espere o DOM carregar, e o problema some

Dá pra usar getElementById no lugar do querySelector?

Dá sim, o resto do código continua igual:

var element = document.getElementById("my-div");

var text = document.createTextNode("Some text here!");

element.appendChild(text);

A diferença é que o getElementById só busca por id, enquanto no querySelector você usa os mesmos seletores do CSS

Como inserir texto no INÍCIO da div em vez do final?

O appendChild sempre joga no fim

Pra colocar antes do que já existe, use o prepend:

element.prepend(text);

Como quebrar linha no texto inserido?

O \n dentro do texto não vira quebra visual no HTML

Se você precisa de duas linhas de verdade, insira dois nós de texto separados por um elemento br, ou aplique um CSS de white-space na div

Resumindo os caminhos: createTextNode com appendChild pra acrescentar texto sem apagar nada, textContent quando você quer substituir o conteúdo, querySelectorAll com forEach quando são várias divs

Em inglês esse mesmo problema aparece como add text to div JavaScript, e a receita é exatamente a de cima

Faça o teste no seu projeto e veja qual encaixa melhor!