Manipulating the DOM

Reading the DOM is only half the story — the real power is in changing it. Every interactive UI feature involves creating new elements, updating content and attributes, toggling styles, or removing elements from the page. In this lesson you will master all DOM manipulation techniques: creating and inserting elements, modifying content safely, working with classes and attributes, and cloning nodes. You will also learn why innerHTML can be dangerous and when to use textContent instead.

Creating and Inserting Elements #

Content and Attribute Properties #

Class Manipulation #

Basic Example #

// ── Create and insert ─────────────────────────────────────────────────────
const list = document.querySelector('#todo-list');

// Create a single item
const li = document.createElement('li');
li.className   = 'todo-item';
li.textContent = 'Learn the DOM';   // safe — not innerHTML
list.appendChild(li);

// insertAdjacentHTML positions:
//   beforebegin — before the element itself
//   afterbegin  — first child of element
//   beforeend   — last child of element (same as append)
//   afterend    — after the element itself
list.insertAdjacentHTML('beforeend', `
    <li class="todo-item">Build a project</li>
`);

// ── DocumentFragment for batch inserts ───────────────────────────────────
const todos = ['Write tests', 'Deploy app', 'Celebrate'];
const frag  = document.createDocumentFragment();

todos.forEach(text => {
    const item = document.createElement('li');
    item.className   = 'todo-item';
    item.textContent = text;   // safe for user-supplied text
    frag.appendChild(item);
});

list.appendChild(frag);   // single reflow — all items added at once

// ── textContent vs innerHTML ──────────────────────────────────────────────
const output = document.querySelector('#output');

const userInput = '<img src=x onerror="alert(1)">';

output.innerHTML   = userInput;   // ❌ DANGEROUS — executes script!
output.textContent = userInput;   // ✅ SAFE — displays as text

// ── Class manipulation ────────────────────────────────────────────────────
const card = document.querySelector('.card');

card.classList.add('featured', 'highlighted');
card.classList.remove('draft');
card.classList.toggle('expanded');               // add if missing, remove if present
card.classList.toggle('visible', true);          // force-add
card.classList.toggle('disabled', false);        // force-remove
card.classList.replace('old-theme', 'new-theme');

console.log(card.classList.contains('featured')); // true

// ── Attributes and dataset ────────────────────────────────────────────────
const img = document.querySelector('img');

img.setAttribute('alt', 'A beautiful sunrise');
img.setAttribute('loading', 'lazy');
img.removeAttribute('title');
console.log(img.getAttribute('src'));      // current src value
console.log(img.hasAttribute('loading')); // true

// data-* attributes via dataset
const btn = document.querySelector('[data-action]');
console.log(btn.dataset.action);      // 'delete'
console.log(btn.dataset.itemId);      // '42' (data-item-id → camelCase)
btn.dataset.confirmed = 'true';       // sets data-confirmed="true"

// ── Remove elements ───────────────────────────────────────────────────────
document.querySelector('.banner')?.remove();   // remove if exists

// Remove all children of a container
const container = document.querySelector('#notifications');
container.replaceChildren();   // fastest way to empty a container

// ── Clone a template card ─────────────────────────────────────────────────
const template = document.querySelector('.card-template');
const clone    = template.cloneNode(true);
clone.querySelector('.card-title').textContent = 'New Card Title';
clone.querySelector('.card-body').textContent  = 'New card body text.';
clone.classList.remove('card-template');
document.querySelector('#card-grid').appendChild(clone);

How It Works #

Step 1 — createElement Creates Detached Nodes #

document.createElement('li') creates a new element object in memory but does not attach it to the DOM tree yet. You configure it (set class, text, attributes) while it is detached — no screen updates happen. Only when you call appendChild, append, or an insert method does the element appear on screen.

Step 2 — Every DOM Change Can Trigger a Reflow #

When you insert, remove, or resize an element, the browser may need to recalculate the positions of other elements (reflow) and repaint the screen. Triggering reflows in a loop — inserting 100 items one by one — is expensive. DocumentFragment batches all inserts into one reflow by keeping nodes off-DOM until the fragment is appended.

Step 3 — textContent Is Always Safe #

el.textContent = str replaces all child nodes with a single text node containing str, with all HTML characters escaped automatically. <script> becomes the literal text <script> on screen. Use this for any user-supplied or external data.

Step 4 — classList Methods Are Idempotent #

classList.add('active') does nothing if the class is already present. classList.remove('active') does nothing if it is absent. This means you do not need to check before calling — just call and the DOM will be in the correct state. The toggle overload toggle('cls', bool) is a clean way to conditionally apply a class based on any boolean expression.

Step 5 — dataset Converts Attribute Names Automatically #

HTML attribute data-item-id becomes element.dataset.itemId — kebab-case is converted to camelCase. Reading dataset.itemId returns a string (always — even numbers). Writing dataset.itemId = 42 sets data-item-id="42" in the HTML. Delete with delete element.dataset.itemId.

Real-World Example: Dynamic Todo List #

// todo-list.js

class TodoList {
    #items = [];
    #container;
    #input;
    #counter;

    constructor(selector) {
        this.#container = document.querySelector(selector);
        this.#input     = this.#container.querySelector('.todo-input');
        this.#counter   = this.#container.querySelector('.todo-count');
        this.#container.querySelector('.todo-form')
            .addEventListener('submit', e => {
                e.preventDefault();
                const text = this.#input.value.trim();
                if (text) { this.add(text); this.#input.value = ''; }
            });
        this.#container.querySelector('.todo-items')
            .addEventListener('click', e => {
                const li = e.target.closest('[data-id]');
                if (!li) return;
                if (e.target.matches('.delete-btn'))  this.remove(li.dataset.id);
                if (e.target.matches('.toggle-btn'))  this.toggle(li.dataset.id);
            });
    }

    add(text) {
        const id   = Date.now().toString();
        this.#items.push({ id, text, done: false });
        this.#render();
    }

    remove(id) {
        this.#items = this.#items.filter(i => i.id !== id);
        this.#render();
    }

    toggle(id) {
        const item = this.#items.find(i => i.id === id);
        if (item) item.done = !item.done;
        this.#render();
    }

    #render() {
        const frag = document.createDocumentFragment();

        this.#items.forEach(({ id, text, done }) => {
            const li = document.createElement('li');
            li.dataset.id = id;
            li.classList.toggle('done', done);

            const span = document.createElement('span');
            span.textContent = text;   // safe — no innerHTML for user text

            const toggleBtn = document.createElement('button');
            toggleBtn.className   = 'toggle-btn';
            toggleBtn.textContent = done ? 'Undo' : 'Done';

            const deleteBtn = document.createElement('button');
            deleteBtn.className   = 'delete-btn';
            deleteBtn.textContent = 'Delete';

            li.append(span, toggleBtn, deleteBtn);
            frag.appendChild(li);
        });

        const list = this.#container.querySelector('.todo-items');
        list.replaceChildren(frag);   // atomic replace — single reflow

        const pending = this.#items.filter(i => !i.done).length;
        this.#counter.textContent = `${pending} item${pending !== 1 ? 's' : ''} remaining`;
    }
}

const todos = new TodoList('#todo-app');

Common Mistakes #

Mistake 1 — Using innerHTML with user-supplied data (XSS) #

❌ Wrong — executes any embedded script:

el.innerHTML = userInput;   // XSS vulnerability if input is untrusted

✅ Correct — textContent for data, innerHTML only for trusted templates:

el.textContent = userInput;   // always safe

Mistake 2 — Forgetting that cloneNode does not clone event listeners #

❌ Wrong — clone has no click handler:

const clone = card.cloneNode(true);
// card had a click listener — clone does NOT
container.appendChild(clone);

✅ Correct — use event delegation instead of per-element listeners:

container.addEventListener('click', e => {
    const card = e.target.closest('.card');
    if (card) handleCardClick(card);
});

Mistake 3 — Inserting items in a loop without fragment #

❌ Slow — triggers a reflow for each item:

items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    list.appendChild(li);   // reflow on every iteration
});

✅ Fast — single reflow with fragment:

const frag = document.createDocumentFragment();
items.forEach(item => {
    const li = document.createElement('li');
    li.textContent = item;
    frag.appendChild(li);
});
list.appendChild(frag);   // one reflow

▶ Try It Yourself

Quick Reference #