Criando elementos dinamicamente
Mudar o que existe é útil; criar o que não existia é o superpoder. Gerar elementos a partir de dados é a base de praticamente todo app.
Estudar esta lição interativa →Até agora, mexemos em elementos que já estavam no HTML. Mas pense no seu feed de qualquer rede social: ninguém escreveu à mão, no HTML, um bloco para cada post seu. O que existe é uma lista de dados (os posts) e um código que cria um elemento na tela para cada item. É por isso que o feed de cada pessoa é diferente: mesmo código, dados diferentes. Essa é a ideia mais importante do módulo, e você já tem todas as peças para montá-la.
São três passos, sempre os mesmos. Primeiro, document.createElement("li") cria um elemento novinho, ainda solto, fora da página (o "li" é a tag de item de lista do HTML). Segundo, você o preenche com o velho .textContent. Terceiro, e essencial: lista.appendChild(li) pendura o elemento na árvore, dentro de outro que já está na página. Só nesse momento ele aparece na tela; esquecer o appendChild é criar um elemento que nunca chega a existir aos olhos do usuário.
No exemplo, uma novidade pequena: o forEach, mais um método de array, primo direto do for...of. Ele roda a sua função uma vez para cada item da lista, e você escolhe entre os dois pelo gosto; aqui ele aparece porque é muito comum em código real. Rode e repare que o HTML tem só um <ul> vazio, e mesmo assim três itens aparecem no resultado:
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. O HTML tem uma lista vazia; quem cria os itens é o JavaScript.
Pense numa linha de produção: os dados são a matéria-prima que chega na esteira, e o loop é a máquina que, para cada unidade, monta uma peça (createElement), estampa o conteúdo (textContent) e encaixa no produto final (appendChild). Apps de verdade, de lojas a redes sociais, são exatamente essa fábrica: dados entram, elementos visuais saem.
Existe outro jeito de colocar conteúdo num elemento: innerHTML, que lê o texto como HTML. Para um texto que você mesmo escreveu no código, tudo certo. Mas, se o texto veio de fora (digitado num campo, devolvido por uma API, guardado por outra pessoa), o innerHTML trata qualquer <tag> dentro dele como HTML de verdade, e alguém pode digitar algo como <img src=x onerror="..."> para rodar código seu no seu site. Esse truque tem nome: XSS (cross-site scripting), e é uma das falhas mais comuns da web.
O textContent não tem esse problema: ele mostra tudo como texto puro, sem interpretar nada, então um <b> digitado aparece na tela como os caracteres <b>. A regra de bolso é simples: texto de fora entra com textContent (ou com createElement + textContent, como nesta lição). Se um dia precisar mesmo montar HTML com texto de fora, troque antes os caracteres &, < e > por &, < e >; o exercício deste módulo pratica exatamente isso.
Guarde bem este padrão (dados + loop + criar/preencher/pendurar), porque ele é o coração do projeto final do curso: uma lista de tarefas completinha, em que cada tarefa digitada vira um item na tela, com botão de concluir e de remover. Você está mais perto disso do que imagina.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Complete a linha de produção e clique em Rodar.