Criando novos elementos: construindo a página dinamicamente

Até agora, você aprendeu a selecionar e alterar elementos que já existiam no HTML. Agora vamos dar um passo muito importante: criar elementos novos com JavaScript.

Pense na página como uma sala. Antes, você só rearrumava os móveis. Agora, você também consegue trazer móveis novos e colocar onde quiser.

Quando isso é útil?

Criar elementos dinamicamente é muito comum para:

• listas de tarefas
• comentários em posts
• cards de produtos
• mensagens de notificação
• itens adicionados por formulário

Passo a passo básico

Fluxo mais comum:

1. Criar o elemento (createElement)
2. Definir conteúdo/atributos/classes
3. Inserir no DOM (appendChild, append, prepend)

1) Criando elemento com createElement

const li = document.createElement("li");

Aqui você criou um <li> em memória, mas ele ainda não aparece na página.

2) Adicionando conteúdo e classe

li.textContent = "Estudar DOM";
li.classList.add("tarefa");

Agora esse novo elemento já tem texto e classe.

3) Inserindo na página

Suponha que exista:

<ul id="lista"></ul>

const lista = document.getElementById("lista");
lista.appendChild(li);

Pronto: o <li> foi inserido no final da lista.

appendChild x append

Ambos inserem elementos, mas append é mais flexível.

lista.appendChild(li); // insere nó
lista.append(li);      // também insere nó
lista.append("texto"); // append aceita texto direto

Inserindo no começo com prepend

lista.prepend(li);

Coloca o novo elemento no início do container.

Criando card completo (exemplo prático)

<div id="cards"></div>

const cards = document.getElementById("cards");

const card = document.createElement("div");
card.classList.add("card");

const titulo = document.createElement("h3");
titulo.textContent = "Produto A";

const preco = document.createElement("p");
preco.textContent = "R$ 99,90";

card.appendChild(titulo);
card.appendChild(preco);

cards.appendChild(card);

Você criou uma estrutura inteira só com JavaScript.

Definindo atributos em novos elementos

const imagem = document.createElement("img");
imagem.setAttribute("src", "produto.jpg");
imagem.setAttribute("alt", "Foto do produto");

Muito útil para links, imagens e inputs.

Cuidado comum de iniciantes

Criar elemento sem inserir no DOM:

const p = document.createElement("p");
p.textContent = "Olá";
// faltou inserir com appendChild/append/prepend

Se não inserir, ele não aparece na página.

Resumo da lição

• document.createElement cria novos elementos.
• Depois de criar, você pode configurar:
  • textContent
  • classList
  • setAttribute
• Para aparecer na página, precisa inserir no DOM:
  • appendChild
  • append
  • prepend
• Esse é o coração de interfaces dinâmicas com JavaScript.