🚀 Capítulo 10: Criando Elementos
🎯 Objetivo da Aula
Ao final desta aula, você saberá como criar novos elementos HTML do zero usando JavaScript com createElement e adicioná-los na página com appendChild.
🏢 O Cenário Prático (Seu Desafio)
O exército de clones precisa crescer! Seu desafio hoje é criar um botão “Gerar Clone”. Toda vez que ele for clicado, um novo item de clone deve ser criado e adicionado na lista da tela!
🧠 Fundamentos: A Teoria Traduzida
O JavaScript permite criar tags HTML dinamicamente. O processo tem 3 passos:
- Criar:
const novo = document.createElement('li');(Cria a tag na memória). - Preencher:
novo.innerText = 'Novo Item';(Coloca texto ou estilos). - Inserir:
pai.appendChild(novo);(Coloca o elemento dentro de uma tag pai que já existe na tela).
📖 Exemplo Guiado: Gerador de Clones
<button id="gerador">Gerar Clone</button>
<ul id="lista"></ul>const botao = document.querySelector('#gerador');
const lista = document.querySelector('#lista');
botao.addEventListener('click', () => {
// 1. Cria
const novoClone = document.createElement('li');
// 2. Preenche
novoClone.innerText = 'Clone Trooper';
// 3. Insere
lista.appendChild(novoClone);
});🛠️ Prática Obrigatória 1
Crie um botão que adiciona um novo parágrafo com o texto “Planeta descoberto!” dentro de uma div.
🛠️ Prática Obrigatória 2
Tente adicionar uma classe CSS ao novo elemento criado usando .classList.add() antes de inseri-lo na tela.
🔑 Gabarito de Código/Fórmulas
Prática 1 e 2:
const p = document.createElement('p');
p.innerText = 'Planeta descoberto!';
p.classList.add('destaque');
document.body.appendChild(p);