O primeiro passo para entender como inserir elementos no HTML de uma página é compreender o conceito de DOM.
O DOM (Document Object Model) é uma representação estruturada do documento HTML. Por meio dele, o JavaScript consegue acessar, modificar, criar e remover elementos da página.
Para entender melhor o DOM, é importante visualizar como funciona a estrutura da árvore de um documento HTML.
Em um documento HTML temos alguns elementos que compõem a estrutura de uma página, como a declaração da página <!doctype html> ou seja a declaração do documento, e o restante dos elementos são estruturados de forma hierárquica que indica uma organização. Como <head> <body> < title> <h1> <p>
ref. https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model/Anatomy_of_the_DOM
Criando elementos na página com JavaScript
Para começar, precisamos entender como criar novos elementos com JavaScript. Para isso, podemos utilizar o método document.createElement(), que permite criar um novo elemento HTML.
Através do createElement() é possível passar o elemento que você deseja criar na sua página.
No exemplo abaixo, estamos indicando a criação do elemento h3 na página HTML.
const h3 = document.createElement(“h3”)
Nesse momento, o elemento <h3> já existe para o JavaScript, mas ainda não foi inserido no DOM e, por isso, não aparece na página.
<!doctype html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8" />
<title>Working with elements</title>
</head>
<body>
<div id="div1"> Texto será criado dinamicamente</div>
</body>
</html>
const addElement = () => {
// cria um novo elemento na div
const h3 = document.createElement("h3");
// e passa o conteúdo para a div
const conteudoMensagem = document.createTextNode("Olá Seja bem vindo(a) ao index Trends, vamos aprender sobre JavaScript!");
// add the text node to the newly created div
h3.appendChild(conteudoMensagem);
// add the newly created element and its content into the DOM
const div = document.getElementById("div1");
div.appendChild(h3)
}
addElement();
Criando o texto no HTML com o JavaScript utilizando document.createTextNode
Após criar o elemento <h3> precisamos inserir um conteúdo de texto nele. Para isso, podemos utilizar document.createTextNode().
const novoTexto = document.createTextNode(texto)
O método createTextNode() cria um nó de texto, mas isso não significa que ele aparecerá automaticamente na página. Primeiro, precisamos definir em qual elemento esse texto será inserido. Como criamos anteriormente o elemento <h3>, podemos adicioná-lo dentro dele utilizando o appendChild()
Utilizando o appendChild()
O método appendChild() é utilizado para adicionar um elemento filho dentro de um elemento pai.
Nesse caso, h3 é o elemento pai e conteudoMensagem é o elemento filho que será inserido dentro dele.
h3.appendChild(conteudoMensagem);
Criar elementos de imagem no HTML utilizando JavaScript
A criação dos elementos no HTML não se resume apenas a textos e heading tags, é possível criar elementos com a inserção de imagens em uma página após feita uma ação pelo usuário.
No Código abaixo, construí um pequeno jogo de contagem de moedas utilizando esse tipo de manipulação do DOM. Conforme o usuário interage com o programa, novas imagens são criadas e inseridas dinamicamente no HTML.
A principal lógica do programa está na função criarMoedas(), responsável por receber informações com a quantidade de moedas, imagem e texto alternativo e classe CSS.
A explicação da lógica por trás da função:
O loop for cria uma repetição responsável por inserir várias imagens de moedas na página. O índice i começa em 1 e, enquanto for menor ou igual ao valor recebido pelo parâmetro num, será incrementado em 1.
Dentro do laço, a constante novaMoeda recebe um novo elemento <img>, criado através do método createElement(). Em seguida, utilizando a notação de ponto, são definidos alguns atributos e propriedades dessa imagem.
A propriedade src recebe o caminho onde a imagem da moeda está armazenada. A propriedade alt recebe o texto alternativo da imagem e className recebe a classe CSS que será utilizada para sua estilização.
Por fim, dvMoedas.appendChild(novaMoeda) insere a nova imagem dentro do elemento dvMoedas. Na hierarquia do DOM, dvMoedas passa a ser o elemento pai e novaMoeda o elemento filho.
Depois que todas as repetições do for terminam, é criado um elemento <br>, responsável pela quebra de linha. Esse elemento também é adicionado como filho de dvMoedas através do método appendChild().
const criarMoedas = (num, moeda, textoALt, classe) => { // Argumentos passados na ordem da chamada da função
//Cria o laço de repetição para inserir várias imagens de moedas na página
for (let i = 1; i <= num; i++) {
const novaMoeda = document.createElement("img") // Cria o elemento img
novaMoeda.src = "img/" + moeda // Atributo src
novaMoeda.alt = textoALt // Texto alternativo
novaMoeda.className = classe // Classe da moeda(css)
dvMoedas.appendChild(novaMoeda) // Hierarquia DOM dvMoedas será
}
const br = document.createElement("br") // Criar uma quebra de linha (br)
dvMoedas.appendChild(br)
}
Criando uma lista de tarefas dinamicamente com JavaScript
Outro exemplo que desenvolvi foi uma lista de tarefas utilizando JavaScript. Nesse programa, utilizei também o localStorage para salvar os dados da lista.
Uma breve explicação sobre o localStorage permite armazenar informações no navegador do usuário. Dessa forma, mesmo que a página seja fechada ou atualizada, os dados permanecem salvos até que eles sejam removidos. Para saber mais sobre localStorage veja este artigo que escrevi.
Voltando ao programa de lista de tarefas ou to-do-list, foram criadas funcionalidades para selecionar, remover e salvar tarefas.
A primeira parte do programa consiste na função responsável pelo envio do formulário (submit). Ela obtém o valor digitado pelo usuário no campo de entrada e utiliza essa informação para criar uma nova tarefa.
Para isso, um elemento <h5> é criado dinamicamente e recebe o texto informado pelo usuário. Depois, esse novo elemento é inserido no DOM.
O laço percorre todas as tarefas existentes. A variável i começa em 0, representando a primeira posição da lista, e continua avançando quando i for menor que tarefas.length.
A cada repetição, tarefas[i] representa a tarefa que está sendo analisada naquele momento.
let aux = -1 // variável auxiliar para indicar linha selecionada
// Percorre a lista de elementos h5 inseridos na página, ou seja, tarefas
for (let i = 0; i < tarefas.length; i++) {
// se tag é da class tarefa-selecionada (está selecionada)
if (tarefas[i].className == "tarefa-selecionada") {
tarefas[i].className = "tarefa-normal" // troca para normal
aux = i // Muda valor da variável auxiliar
break // Sai da repetição
}
}
// Se a linha que está selecionada é a última, irá voltar para a primeira
if (aux == tarefas.length - 1) {
aux = -1
}
tarefas[aux + 1].className = "tarefa-selecionada" // muda estilo da próxima linha
})
O programa de to-do-list é um ótimo exercício para entender melhor o contexto de como é possível inserir os elementos em HTML no DOM e manipulá-los. Além de praticar o localstorage.
Conclusão:
Mesmo com a facilidade atual de criar páginas e códigos utilizando Inteligência Artificial, aprender programação continua sendo importante para desenvolver o raciocínio lógico e compreender o que acontece por trás do código.
Entender conceitos como DOM, createElement(), creatTextNode() e appendChild() ajuda a perceber como o JavaScript consegue criar, inserir e modificar elementos de uma página dinamicamente.
Os exemplos de moedas e da lista de tarefas mostram que esses conceitos podem ser utilizados em aplicações reais e combinados com outros recursos do JavaScript, como loops e localStorage.
Espero que este artigo tenha ajudado a tornar esses conceitos um pouco mais claros. Até breve!
Sou Roberto Borba, publicitário de formação e apaixonado por marketing digital desde 2017. Hoje trabalho como gerente de SEO, ajudando marcas a crescerem através de dados, conteúdo e estratégias digitais. Fora do trabalho, me conecto à criatividade em outras linguagens: ilustração, pintura e tatuagem.