DOM Manipulation

The DOM models a document as nodes and elements. Select narrowly, retain useful references, and update semantic properties.

Safe construction

const list = document.querySelector("[data-lessons]");
const fragment = document.createDocumentFragment();

for (const title of titles) {
  const item = document.createElement("li");
  item.textContent = title;
  item.classList.add("lesson");
  fragment.append(item);
}
list.append(fragment);

Use textContent for untrusted text; innerHTML parses markup and can introduce XSS. dataset, attributes, properties, classList, closest, and matches support interaction. Batch changes and avoid layout read/write thrashing. Preserve focus, labels, keyboard behavior, and ARIA semantics when modifying interfaces.