Criar HTML do Zero (Dinamicamente)
O que vais aprender nesta aula:
- Criar elementos:
document.createElement("tag") - Definir conteúdo:
elemento.innerText - Colocar na página:
pai.appendChild(filho)
🧠 Teoria (com Analogia e Contexto Real)
Muitas vezes, a página começa vazia (ex: Feed do Instagram). Os posts são criados pelo JavaScript à medida que chegam.
🧱 Analogia do LEGO
1. createElement: Pegas numa peça nova da caixa (ainda está na tua mão, não na construção).
2. innerText: Escreves ou colas um autocolante na peça.
3. appendChild: Encaixas a peça na construção principal (aí sim, ela aparece).
💻 Prática (Orientada e Progressiva)
A "Santa Trindade" da criação de elementos:
Passo a Passo
// 1. Criar (Na memória)
const novoParagrafo = document.createElement("p");
// 2. Personalizar
novoParagrafo.innerText = "Este texto foi criado com JS!";
novoParagrafo.style.color = "lime";
// 3. Inserir (No HTML)
document.body.appendChild(novoParagrafo);