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

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!