Creating and Inserting Elements

The pattern is always the same: create a node, configure it, insert it.

Create, Configure, Insert

const li = document.createElement('li');
li.textContent = 'New item';
li.classList.add('task');

const list = document.querySelector('ul');
list.appendChild(li);  // adds at end
list.prepend(li);      // adds at start

insertAdjacentElement

For precise positioning relative to an existing element, use insertAdjacentElement. Its first argument is one of four position strings: beforebegin, afterbegin, beforeend, afterend.

const ref = document.querySelector('.ref-item');
const newEl = document.createElement('p');
newEl.textContent = 'Inserted after';
ref.insertAdjacentElement('afterend', newEl);

Removing Elements

const old = document.querySelector('.outdated');
old.remove(); // modern, direct

DocumentFragment for Batching

When inserting many nodes at once, use a DocumentFragment to avoid multiple reflows.

const frag = document.createDocumentFragment();
['A','B','C'].forEach(text => {
  const li = document.createElement('li');
  li.textContent = text;
  frag.appendChild(li);
});
document.querySelector('ul').appendChild(frag);