🔨 Lesson 16: Creating & Removing Elements

Creating Elements

The document.createElement method creates a new HTML element in memory. At this point the element exists only in JavaScript — it's not visible on the page until you insert it into the DOM.

// Create a new paragraph element
const paragraph = document.createElement("p");

// It exists in memory but is NOT on the page yet
console.log(paragraph);  // <p></p>
                

Building Up an Element

After creating an element, configure it — add text, classes, attributes, styles — before inserting it into the page.

// Create a card element step by step
const card = document.createElement("div");
card.classList.add("card", "featured");
card.id = "new-card";
card.dataset.category = "news";

// Add text content
const title = document.createElement("h3");
title.textContent = "Breaking News";

const body = document.createElement("p");
body.textContent = "Something exciting just happened!";

// Build the tree: add children to the card
card.appendChild(title);
card.appendChild(body);

// card is now:
// <div class="card featured" id="new-card" data-category="news">
//   <h3>Breaking News</h3>
//   <p>Something exciting just happened!</p>
// </div>
                

Helper Function Pattern

When you create elements frequently, a small helper keeps your code clean and readable.

function createEl(tag, { text, classes, attrs } = {}) {
    const el = document.createElement(tag);
    if (text) el.textContent = text;
    if (classes) el.classList.add(...classes);
    if (attrs) {
        for (const [key, val] of Object.entries(attrs)) {
            el.setAttribute(key, val);
        }
    }
    return el;
}

// Usage — much cleaner!
const heading = createEl("h2", { text: "Hello!", classes: ["title", "primary"] });
const link = createEl("a", { text: "Visit", attrs: { href: "https://example.com", target: "_blank" } });
                

Inserting Elements into the DOM

Once you've created and configured an element, you need to put it somewhere on the page. There are several insertion methods, each placing the element in a different position relative to a reference element.

append() & prepend()

These add elements as children of the target — at the end or the beginning.

const list = document.querySelector("#my-list");

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

// Add as the LAST child
list.append(newItem);

// Add as the FIRST child
const firstItem = document.createElement("li");
firstItem.textContent = "I'm first now!";
list.prepend(firstItem);

// append and prepend can also accept plain strings
list.append("Some text at the end");
                

before() & after()

These insert elements as siblings — directly before or after the reference element.

const middleItem = document.querySelector("#item-3");

const beforeItem = document.createElement("li");
beforeItem.textContent = "Inserted before item 3";
middleItem.before(beforeItem);

const afterItem = document.createElement("li");
afterItem.textContent = "Inserted after item 3";
middleItem.after(afterItem);
                

Inserting Multiple Elements at Once

append, prepend, before, and after all accept multiple arguments — elements and strings mixed together.

const container = document.querySelector(".container");

const heading = document.createElement("h2");
heading.textContent = "New Section";

const paragraph = document.createElement("p");
paragraph.textContent = "Here's the content.";

// Insert both at once
container.append(heading, paragraph);
                

// appendChild — older, still common
list.appendChild(newItem);            // One element only

// append — modern, more flexible
list.append(item1, item2, "text");    // Multiple items + strings
                    

Moving Elements

A DOM element can only exist in one place at a time. If you append an element that's already in the DOM, it moves — it doesn't create a copy.

const sidebar = document.querySelector(".sidebar");
const main = document.querySelector(".main");

// This heading is currently in the sidebar
const heading = sidebar.querySelector("h2");

// Appending it to main MOVES it — it's removed from the sidebar
main.append(heading);
                

Removing & Replacing Elements

remove() — The Modern Way

The simplest way to remove an element — just call remove() on it.

const card = document.querySelector(".old-card");
card.remove();  // Gone from the DOM

// Common pattern: remove after a click
const deleteBtn = document.querySelector(".delete-btn");
deleteBtn.addEventListener("click", () => {
    deleteBtn.closest(".card").remove();
});
                

replaceWith() — Swap One Element for Another

const oldHeading = document.querySelector("h2");

const newHeading = document.createElement("h2");
newHeading.textContent = "Updated Title";
newHeading.classList.add("highlight");

// Replace the old heading with the new one
oldHeading.replaceWith(newHeading);
                

Removing All Children

Need to clear a container? There are a few approaches.

const list = document.querySelector("#task-list");

// Option 1: Set innerHTML to empty (simple but slower)
list.innerHTML = "";

// Option 2: replaceChildren with no arguments (modern, clean)
list.replaceChildren();

// Option 3: Loop and remove (verbose but explicit)
while (list.firstChild) {
    list.firstChild.remove();
}
                

// Old way — requires a reference to the parent
const parent = child.parentNode;
parent.removeChild(child);

// Modern way — much simpler
child.remove();
                    

Cloning Elements

Since appending an element moves it, you need cloneNode() if you want a copy.

const original = document.querySelector(".card-template");

// Shallow clone — copies only the element itself, not its children
const shallowCopy = original.cloneNode(false);
console.log(shallowCopy.innerHTML);  // "" (empty)

// Deep clone — copies the element AND all its descendants
const deepCopy = original.cloneNode(true);
console.log(deepCopy.innerHTML);     // Full content copied
                

Practical: Card from a Template

// HTML: a hidden template card
// <div class="card-template" style="display:none">
//   <h3 class="card-title"></h3>
//   <p class="card-body"></p>
// </div>

function createCard(title, body) {
    const template = document.querySelector(".card-template");
    const card = template.cloneNode(true);  // Deep clone

    // Customize the clone
    card.classList.remove("card-template");
    card.classList.add("card");
    card.style.display = "";  // Make it visible
    card.querySelector(".card-title").textContent = title;
    card.querySelector(".card-body").textContent = body;

    return card;
}

const newCard = createCard("Welcome!", "This card was cloned from a template.");
document.querySelector(".card-grid").append(newCard);
                

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

const template = document.querySelector("#card-template");
// .content gives you the DocumentFragment inside the template
const clone = template.content.cloneNode(true);
clone.querySelector(".card-title").textContent = "Hello!";
document.querySelector(".card-grid").append(clone);
                    

innerHTML vs. createElement

You've seen two ways to add content: building elements with createElement or writing HTML strings with innerHTML. Each has trade-offs.

innerHTML — Quick but Risky

const list = document.querySelector("#task-list");

// Quick and easy for static content you control
list.innerHTML = `
    <li class="task">Buy groceries</li>
    <li class="task">Walk the dog</li>
    <li class="task">Write code</li>
`;

// ⚠️ Replaces ALL existing content — previous children are destroyed
// ⚠️ Event listeners on old children are lost
// ❌ DANGEROUS with user input (XSS vulnerability)
                

createElement — Safe and Precise

// More code, but safe and precise
function addTask(text) {
    const li = document.createElement("li");
    li.classList.add("task");
    li.textContent = text;  // textContent is XSS-safe

    document.querySelector("#task-list").append(li);
    // Existing children and their event listeners are preserved
}

addTask("Buy groceries");
addTask("Walk the dog");
addTask("Write code");
                

* Use DocumentFragment (next section) to batch createElement calls into one reflow.

DocumentFragment & Batch Inserts

Every time you insert an element into the DOM, the browser may recalculate layout (a "reflow"). If you're adding 100 items one at a time, that's potentially 100 reflows. A DocumentFragment lets you build a batch of elements off-screen and insert them all at once — one reflow.

// ❌ Slow: 100 individual DOM insertions
const list = document.querySelector("#my-list");
for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Item ${i + 1}`;
    list.append(li);  // Reflow on each append
}

// ✅ Fast: Build in a fragment, insert once
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
    const li = document.createElement("li");
    li.textContent = `Item ${i + 1}`;
    fragment.append(li);  // No reflow — fragment is off-screen
}
list.append(fragment);    // One reflow for all 100 items
                

How Fragments Work

A DocumentFragment is a lightweight container that holds DOM nodes but isn't part of the visible page. When you append a fragment to the DOM, the fragment itself disappears — only its children are inserted.

const fragment = document.createDocumentFragment();

const h2 = document.createElement("h2");
h2.textContent = "Section Title";

const p = document.createElement("p");
p.textContent = "Section content goes here.";

fragment.append(h2, p);

// Inserting the fragment adds h2 and p (not the fragment wrapper)
document.querySelector("main").append(fragment);

// fragment is now empty — its children moved to the DOM
console.log(fragment.childNodes.length);  // 0
                

Hands-on Exercise

<!-- Save this as notifications.html and open in a browser -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Notification System</title>
    <style>
        body { font-family: sans-serif; padding: 2rem; background: #f1f5f9; }
        .controls { display: flex; gap: 0.5rem; margin-bottom: 2rem; flex-wrap: wrap; }
        .controls button {
            padding: 0.5rem 1rem; border: none; border-radius: 6px;
            color: white; cursor: pointer; font-size: 0.9rem;
        }
        .btn-success { background: #22c55e; }
        .btn-warning { background: #f59e0b; }
        .btn-error { background: #ef4444; }
        .btn-info { background: #3b82f6; }
        .btn-clear { background: #64748b; }

        #notification-area {
            position: fixed; top: 1rem; right: 1rem;
            width: 320px; display: flex; flex-direction: column; gap: 0.5rem;
            z-index: 1000;
        }
        .notification {
            padding: 1rem; border-radius: 8px; color: white;
            display: flex; justify-content: space-between; align-items: start;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            animation: slideIn 0.3s ease;
        }
        .notification.success { background: #22c55e; }
        .notification.warning { background: #f59e0b; color: #1e293b; }
        .notification.error { background: #ef4444; }
        .notification.info { background: #3b82f6; }
        .notification .close-btn {
            background: none; border: none; color: inherit;
            font-size: 1.2rem; cursor: pointer; padding: 0; margin-left: 0.5rem;
            opacity: 0.8;
        }
        .notification .close-btn:hover { opacity: 1; }
        .notification-text { flex: 1; }
        .counter { color: #64748b; }

        @keyframes slideIn {
            from { transform: translateX(100%); opacity: 0; }
            to { transform: translateX(0); opacity: 1; }
        }
    </style>
</head>
<body>
    <h1>🔔 Notification System</h1>
    <div class="controls">
        <button class="btn-success" data-type="success">✅ Success</button>
        <button class="btn-warning" data-type="warning">⚠️ Warning</button>
        <button class="btn-error" data-type="error">❌ Error</button>
        <button class="btn-info" data-type="info">ℹ️ Info</button>
        <button class="btn-clear">🗑️ Clear All</button>
    </div>
    <p class="counter">Notifications: <span id="count">0</span></p>
    <div id="notification-area"></div>

    <script>
    // TODO: Complete each task

    // 1. Write a showNotification(type, message) function:
    //    - Create a <div class="notification {type}">
    //    - Inside it, create a <span class="notification-text"> with the message
    //    - Create a <button class="close-btn"> with "×" as text
    //    - Append text span and close button to the notification div
    //    - Prepend the notification to #notification-area
    //    - Auto-remove after 5 seconds using setTimeout
    //    - Update the count

    // 2. Use event delegation on .controls to handle button clicks:
    //    - If the button has a data-type attribute, call showNotification
    //      with that type and an appropriate message
    //    - If the "Clear All" button is clicked, remove all notifications

    // 3. Use event delegation on #notification-area to handle close clicks:
    //    - If a .close-btn is clicked, remove its parent .notification
    //    - Update the count

    // 4. Write an updateCount() function that counts .notification
    //    elements and updates #count

    // 5. Bonus: Use a DocumentFragment to add 5 notifications at once
    //    when a keyboard shortcut (e.g., Ctrl+Shift+N) is pressed
    </script>
</body>
</html>
                    

const notificationArea = document.querySelector("#notification-area");
const controls = document.querySelector(".controls");
const countDisplay = document.querySelector("#count");

const messages = {
    success: "Operation completed successfully!",
    warning: "Please check your input.",
    error: "Something went wrong. Try again.",
    info: "Here's some useful information."
};

// 4. Update the notification count
function updateCount() {
    countDisplay.textContent =
        notificationArea.querySelectorAll(".notification").length;
}

// 1. Show a notification
function showNotification(type, message) {
    const notification = document.createElement("div");
    notification.classList.add("notification", type);

    const text = document.createElement("span");
    text.classList.add("notification-text");
    text.textContent = message;

    const closeBtn = document.createElement("button");
    closeBtn.classList.add("close-btn");
    closeBtn.textContent = "×";

    notification.append(text, closeBtn);
    notificationArea.prepend(notification);
    updateCount();

    // Auto-remove after 5 seconds
    setTimeout(() => {
        notification.remove();
        updateCount();
    }, 5000);
}

// 2. Event delegation on controls
controls.addEventListener("click", (event) => {
    const btn = event.target.closest("button");
    if (!btn) return;

    const type = btn.dataset.type;
    if (type) {
        showNotification(type, messages[type]);
    } else if (btn.classList.contains("btn-clear")) {
        notificationArea.replaceChildren();
        updateCount();
    }
});

// 3. Event delegation for close buttons
notificationArea.addEventListener("click", (event) => {
    if (event.target.matches(".close-btn")) {
        event.target.closest(".notification").remove();
        updateCount();
    }
});

// 5. Bonus: Batch notifications with Ctrl+Shift+N
document.addEventListener("keydown", (event) => {
    if (event.ctrlKey && event.shiftKey && event.key === "N") {
        event.preventDefault();
        const types = ["success", "warning", "error", "info", "success"];
        const fragment = document.createDocumentFragment();

        types.forEach(type => {
            const notification = document.createElement("div");
            notification.classList.add("notification", type);

            const text = document.createElement("span");
            text.classList.add("notification-text");
            text.textContent = messages[type] || "Batch notification";

            const closeBtn = document.createElement("button");
            closeBtn.classList.add("close-btn");
            closeBtn.textContent = "×";

            notification.append(text, closeBtn);
            fragment.append(notification);

            // Auto-remove each after 5 seconds
            setTimeout(() => {
                notification.remove();
                updateCount();
            }, 5000);
        });

        notificationArea.prepend(fragment);
        updateCount();
    }
});
                        

Summary

📚 Additional Resources

• MDN — createElement()
• MDN — append()
• MDN — cloneNode()
• MDN — DocumentFragment
• MDN — <template> Element
• javascript.info — Modifying the Document

🚀 What's Next?

Module 5 is where everything comes together. You'll build real interactive features — forms with client-side validation, timers and animations, persistent data with Local Storage, and fetching live data from APIs. First up: Forms & Validation.