Aula 50 — Criação dinâmica de elementos

Até agora, manipulamos elementos que já existiam no HTML, usando seletores como getElementById e querySelector.

Mas aplicações modernas vão além disso: elas criam elementos dinamicamente, conforme os dados chegam ou conforme o usuário interage.

Nesta aula, vamos aprender a criar elementos HTML usando apenas JavaScript.

🎯 Objetivo da aula

Ao final desta aula, você será capaz de:

• Criar elementos HTML via JavaScript
• Definir conteúdo e atributos
• Inserir elementos na página
• Entender o fluxo de criação dinâmica
• Preparar o terreno para aplicações interativas

Por que criar elementos dinamicamente?

Imagine cenários como:

• Lista de usuários vinda de uma API
• Lista de tarefas adicionadas pelo usuário
• Cards de produtos carregados dinamicamente

Nesses casos, o HTML não nasce pronto. Ele é construído pelo JavaScript.

Passo 1 — Criando um elemento

Para criar um elemento HTML, usamos document.createElement.

 const paragrafo = document.createElement("p");

console.log(paragrafo);

 console.log(paragrafo); // Saída será um elemento <p> vazio 

Nesse momento, o elemento existe apenas na memória — ele ainda não está na página.

Passo 2 — Definindo conteúdo

Agora vamos adicionar texto ao elemento:

 paragrafo.textContent = "Olá, mundo dinâmico!"; 

Também poderíamos usar innerHTML, mas veremos depois quando isso é adequado.

Passo 3 — Inserindo na página

Para inserir o elemento no DOM, usamos appendChild ou append.

 document.body.appendChild(paragrafo); 

Agora o parágrafo aparece na tela.

Criando um elemento completo

Vamos criar um elemento do zero, com texto e inserção:

 
  const titulo = document.createElement("h2"); 
  titulo.textContent = "Título criado via JavaScript";
  document.body.appendChild(titulo);

Adicionando atributos

Podemos definir atributos como id, class e outros:

 const div = document.createElement("div"); div.id = "container"; div.className = "box destaque";

div.textContent = "Conteúdo da div";

document.body.appendChild(div);

Isso é muito comum ao criar componentes visuais.

Exemplo real: criando uma lista dinâmica

Vamos criar uma lista a partir de um array:

 const tarefas = ["Estudar JS", "Praticar DOM", "Criar projetos"];

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

tarefas.forEach(tarefa => {
const li = document.createElement("li");
li.textContent = tarefa;
ul.appendChild(li);
});

document.body.appendChild(ul);

Aqui o HTML é totalmente construído pelo JavaScript.

Ordem mental correta

Sempre pense neste fluxo:

• Criar o elemento
• Configurar conteúdo e atributos
• Inserir no DOM

Na próxima aula, vamos aprender sobre delegação de eventos, essencial para trabalhar com elementos criados dinamicamente.