JavaScript Academy · Aula

Criando e inserindo elementos

Crie novos nós com createElement e append.

Criando e inserindo elementos é uma aula grátis de JavaScript Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de JavaScript Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de JavaScript Academy inclui 4 aulas no total.

Criando novos elementos

Em vez de escrever cadeias de caracteres HTML, você pode construir elementos no código. Isso evita XSS e fornece uma referência real ao elemento para ser configurada.

createElement

document.createElement cria um novo elemento separado. Ele existe na memória, mas ainda não está na página.

const li = document.createElement("li");
li.textContent = "New item";

Configurando antes de inserir

Defina classes, atributos e conteúdo enquanto o elemento ainda estiver desanexado. Ele só ficará visível depois que for inserido.

const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";

append

append adiciona nós (ou cadeias de caracteres) como os últimos filhos de um elemento. Ele pode receber vários argumentos.

const list = document.querySelector("ul");
list.append(li);

prepend

prepend insere nós como os primeiros filhos, empurrando os filhos existentes para baixo.

list.prepend(document.createElement("li"));

append aceita cadeias de caracteres

Ao contrário do appendChild, mais antigo, append pode receber cadeias de caracteres simples e vários argumentos de uma só vez.

const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");

appendChild

appendChild é o método clássico. Ele aceita apenas um nó e o retorna, enquanto append retorna o valor indefinido.

const node = list.appendChild(document.createElement("li"));

insertBefore

insertBefore coloca um novo nó antes de um filho existente específico, permitindo um posicionamento preciso.

const ref = list.children[1];
list.insertBefore(li, ref);

insertAdjacentElement

insertAdjacentElement insere algo em relação a um elemento usando posições como antes do início, depois do início, antes do fim e depois do fim.

ref.insertAdjacentElement("beforebegin", li);

DocumentFragment para lotes

Ao adicionar muitos elementos, crie-os primeiro em um DocumentFragment e depois faça uma única inserção. Isso minimiza as reorganizações de layout e é mais rápido.

const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
  const item = document.createElement("li");
  item.textContent = "Row " + i;
  frag.append(item);
}
list.append(frag);

cloneNode

cloneNode(true) copia um elemento e seus descendentes, sendo útil para criar estruturas repetidas a partir de modelos.

const copy = li.cloneNode(true);
list.append(copy);

Verificação rápida

Escolha a melhor técnica.

Recapitulação

Use createElement para criar elementos desanexados, configurá-los e depois inseri-los com append/prepend (com suporte a cadeias de caracteres e vários argumentos), appendChild (um único nó) ou insertBefore/insertAdjacentElement para posições precisas. Agrupe muitas inserções usando um DocumentFragment e reutilize estruturas com cloneNode(true).

Perguntas Frequentes

A aula “Criando e inserindo elementos” é grátis?

Sim — o texto completo de “Criando e inserindo elementos” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de JavaScript Academy, atualize para CoddyKit PRO. O curso de JavaScript Academy inclui 4 aulas no total.

O que vou aprender em “Criando e inserindo elementos”?

Crie novos nós com createElement e append. Você pratica JavaScript Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar JavaScript Academy?

Nenhuma experiência prévia é necessária. JavaScript Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.

Quanto tempo leva a aula “Criando e inserindo elementos”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de JavaScript Academy?

Sim. Cada aula de JavaScript Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

← Voltar para JavaScript Academy