0Pricing
Frontend Academy · Aula

Criando e anexando elementos

Use createElement, setAttribute, append e remove para criar e modificar dinamicamente a estrutura do DOM.

Criando e anexando elementos é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 4 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 Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

createElement

document.createElement(tagName) cria um novo elemento na memória — ele ainda não está no DOM. Depois, defina suas propriedades e use append para adicioná-lo à árvore.

const btn = document.createElement('button');
btn.textContent = 'Click Me';
btn.classList.add('btn-primary');
btn.setAttribute('type', 'button');
// btn is in memory, not yet in the page

append e appendChild

parent.append(child) adiciona um nó ou uma cadeia de caracteres ao final dos elementos filhos de parent. appendChild é o equivalente mais antigo, mas append é mais flexível: aceita vários nós e cadeias de caracteres.

const list = document.querySelector('ul');
const item = document.createElement('li');
item.textContent = 'New item';
list.append(item); // adds to end of list

prepend, before, after

parent.prepend() adiciona no início. element.before() insere antes do element. element.after() insere depois dele.

const header = document.querySelector('.card-header');
const icon = document.createElement('img');
icon.src = 'icon.svg';
header.prepend(icon); // icon goes before all other children

const divider = document.createElement('hr');
header.after(divider); // divider goes after the header

insertAdjacentHTML

element.insertAdjacentHTML(position, htmlString) insere HTML em uma posição especificada sem substituir o conteúdo existente. Posições: 'beforebegin', 'afterbegin', 'beforeend', 'afterend'.

const container = document.querySelector('.list');
container.insertAdjacentHTML('beforeend', `
  <li class="item">
    <span class="name">Alice</span>
  </li>
`);
// Still avoid with user input — XSS risk

cloneNode

element.cloneNode(true) cria uma cópia profunda de um element, incluindo todos os seus filhos. Passe false para criar uma cópia superficial. É útil para duplicar elements de template.

const template = document.querySelector('.card-template');
const clone = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card';
container.append(clone);

removeChild e remove()

element.remove() remove o element do DOM. O parent.removeChild(child) mais antigo também funciona. Os elements removidos ainda podem ser referenciados em variáveis e adicionados novamente.

const item = document.querySelector('.to-delete');
item.remove(); // clean modern syntax

replaceWith

oldElement.replaceWith(newElement) substitui o old element no DOM pelo newElement. É mais conveniente do que o padrão replaceChild mais antigo.

const old = document.querySelector('.old-banner');
const fresh = document.createElement('div');
fresh.className = 'new-banner';
fresh.textContent = 'Updated!';
old.replaceWith(fresh);

DocumentFragment para inserções em lote

Um DocumentFragment é um container leve que não existe no DOM. Construa uma subárvore dentro dele e depois faça append dele em uma única operação — isso causa apenas um refluxo, em vez de N.

const fragment = document.createDocumentFragment();
users.forEach(user => {
  const li = document.createElement('li');
  li.textContent = user.name;
  fragment.append(li);
});
// One DOM write:
document.querySelector('ul').append(fragment);

O elemento &lt;template&gt;

O element HTML <template> mantém uma marcação que não é renderizada até ser clonada com JavaScript. É melhor do que criar strings ou clonar elements visíveis.

<template id="card-tpl">
  <div class="card">
    <h3 class="card-title"></h3>
    <p class="card-body"></p>
  </div>
</template>

Definindo propriedades versus atributos

As propriedades de element (el.href, el.src, el.value) costumam ser a maneira mais direta e eficiente de definir valores. Os atributos (setAttribute) são melhores para atributos personalizados ou ARIA que não têm uma propriedade correspondente no DOM.

// Property (preferred for standard HTML attributes):
img.src = '/photo.webp';
link.href = '/about';

// setAttribute (for ARIA and custom attributes):
button.setAttribute('aria-expanded', 'true');
div.setAttribute('data-index', '3');

Evitando innerHTML com conteúdo do usuário

Ao criar elements with dados fornecidos pelo usuário, sempre use métodos do DOM (createElement, textContent, setAttribute) em vez de criar uma string HTML e usar innerHTML. Nunca interpole a entrada do usuário em strings HTML.

// DANGEROUS:
container.innerHTML = `<p>${userComment}</p>`;

// SAFE:
const p = document.createElement('p');
p.textContent = userComment;
container.append(p);

Verificação rápida

Você precisa adicionar 100 itens de lista a um <ul> sem causar 100 refluxos. Qual abordagem é melhor?

Recapitulação: criando elements do DOM

createElement cria na memória. append/prepend/before/after inserem na árvore. remove() exclui um element. DocumentFragment agrupa inserções para melhorar o desempenho. O element