Building New Things | HAP's Learning Lab: The DOM

What You'll Learn at This Station

HAP's Discovery: Everything I'd done so far involved elements that were already sitting in my HTML. But what happens when the element I need doesn't exist yet? It turns out the DOM lets me build new elements from scratch, configure them however I want, and then place them exactly where I need them. Here are the three big ideas from this station.

🏗️ Create From Scratch

createElement()

The DOM gives me a method to conjure brand-new elements that don't exist in the HTML yet. They start invisible, floating in memory, waiting to be configured.

🎭 Configure Backstage

textContent + classList

Before putting an element on the page, I set it up completely — text, classes, attributes — so it appears fully styled. No flash of broken content.

📌 Attach When Ready

appendChild()

Only when the element is fully configured do I attach it to the page. One method call and it's live. And remove() takes it away just as easily.

HAP surrounded by tangled code with an 'oops' expression

HAP's Confession:

I spent twenty minutes wondering why my badge wasn't showing up on the page. I'd created it, configured it, styled it... but forgot to call appendChild(). The element was just floating in memory, fully dressed with nowhere to go.
I tried document.remove() to delete a badge and got a TypeError. Turns out remove() belongs to the element itself, not to document. The element removes itself.
I appended a badge to the page before adding its text and class. For a split second, an empty unstyled <span> flashed on screen before the text appeared. Configure backstage, attach when ready!
I tried badges.textContent on the result of querySelectorAll and got undefined. Turns out querySelectorAll gives back a whole collection, not a single element. I had to use forEach to work with each badge one at a time.

The Three-Step Pattern: Create, Configure, Attach

This was the moment everything clicked for me. Adding a new element to the page always follows the same three steps. Once I saw the pattern, I couldn't unsee it.

The three-step pattern:

// Step 1: CREATE — make an empty element in memory
const badge = document.createElement('span');

// Step 2: CONFIGURE — set it up "backstage"
badge.textContent = 'JavaScript';
badge.classList.add('badge');

// Step 3: ATTACH — put it on the page
const cardActions = document.querySelector('.card-actions');
cardActions.appendChild(badge);

createElement makes an empty element that exists only in memory. It's not on the page yet — it's backstage, invisible to the user. I configure it with all the text and classes it needs. Then appendChild places it inside another element, and it becomes visible.

🟠 My Mental Model:

I think of it like building a LEGO piece in my hand before snapping it onto the set. I don't glue a blank brick to the model and then try to paint it — I prepare it first, then attach it. createElement is grabbing a blank brick. Configuring is shaping and painting it. appendChild is snapping it into place.

Why the Order Matters

I learned this the hard way. When I attached the element before configuring it, something weird happened.

Wrong order (causes a flash of unstyled content):

const badge = document.createElement('span');

// Attaching BEFORE configuring — bad idea!
document.querySelector('.card-actions').appendChild(badge);

// Now the empty, unstyled span is already visible...
badge.textContent = 'JavaScript';  // text pops in
badge.classList.add('badge');       // styles pop in

For a brief moment, an empty <span> appeared on the page with no text and no styling. Then the text popped in, then the styles applied. It looked janky and broken. The fix is always: configure backstage, attach when ready.

Remember: Configure backstage, attach when ready. This avoids the flash of unstyled content that confuses users and looks unprofessional.

Building Multiple Badges

Once I had the three-step pattern, I realized I was repeating myself every time I wanted a new badge. That's when I wrapped it in a helper function.

A helper function for creating badges:

function addBadge(text) {
  const badge = document.createElement('span');
  badge.textContent = text;
  badge.classList.add('badge');
  document.querySelector('.card-actions').appendChild(badge);
}

addBadge('JavaScript');
addBadge('DOM');
addBadge('CSS');

Same three-step pattern every time — create, configure, attach — but now wrapped in a reusable function. Each call adds a fully-configured badge to the page. Three lines instead of fifteen.

The NodeList Gotcha

This was the first time I needed querySelectorAll instead of querySelector. I had multiple badges and wanted to work with all of them. But the result wasn't what I expected.

NodeList is not an element:

const badges = document.querySelectorAll('.badge');

// This does NOT work:
badges.textContent;  // → undefined!

// It's a collection, not one element. Use forEach to loop through:
badges.forEach(badge => console.log(badge.textContent));
// → "JavaScript"
// → "DOM"
// → "CSS"

querySelectorAll returns a NodeList — basically a collection of elements, not a single one. That tripped me up because I expected it to work like querySelector. The collection itself doesn't have textContent or classList — those belong to individual elements inside it. forEach runs a bit of code once for each element in the collection. (If that syntax looks unfamiliar, don't worry — the pattern is what matters here.)

querySelector

Returns one element (the first match). I can use textContent, classList, and other element properties directly on the result.

querySelectorAll

Returns a NodeList (all matches). I need forEach to access individual elements. The NodeList itself has no element properties.

Removing Elements

Adding elements is great, but sometimes I need to take them away. I learned that removal is surprisingly simple — once I stopped making one specific mistake.

Removing an element from the page:

// Find the element I want to remove
const cssBadge = document.querySelector('.badge:last-child');

// Remove it
cssBadge.remove();

The element removes itself. I call remove() on the element, and it disappears from the page. Clean and simple.

My wrong attempt:

// I tried this first — WRONG!
document.remove();
// → TypeError: document.remove is not a function

I assumed remove() lived on document, like querySelector does. But remove() is a method on individual elements, not on the document. The element removes itself — document doesn't remove things for me.

The Safe Pattern, Reinforced

Here's something that made me feel really good about what I'd learned. Every technique in this station — createElement, textContent, classList.add, appendChild — follows the safe pattern from Station 4.

textContent, Not innerHTML

I set badge text with textContent, which treats everything as plain text. No HTML gets parsed, so no injection risk.

classList.add, Not className

I add classes with classList.add(), which only adds what I specify. No accidental overwriting, no string concatenation vulnerabilities.

createElement, Not HTML Strings

I build elements with createElement(), not by writing HTML strings. The browser creates a proper DOM node, not a string that could contain malicious code.

Safe by Default

The create-configure-attach pattern is inherently safe. No innerHTML means no injection risk. I'm building with the DOM API, not writing raw HTML.

🟠 The Build Pattern Is Inherently Safe:

When I create elements with createElement and set text with textContent, there's no way for malicious HTML or scripts to sneak in. The safe pattern isn't just a rule to follow — it's built into the way this approach works. I'm not avoiding innerHTML on purpose here; I'm using tools that never needed it in the first place.

Try It: Badge Builder Demo

I built an interactive demo where I can practice the create-configure-attach pattern. I can type badge text, click to create badges, and click badges to remove them. The "What's Happening" panel shows the JavaScript code that runs with each action.

🔬 Interactive Demo:

Head over to the Badge Builder to practice creating and removing DOM elements in real time. Every button click maps to real DOM methods — the same ones from this station.

🎓 Element Creation Quick Reference

Create, Configure, Attach

Always follow the three-step pattern: createElement() to build it, set textContent and classList to configure it, and appendChild() to place it on the page. Configure backstage, attach when ready.

appendChild Adds to the End

parentElement.appendChild(newChild) always adds the new element as the last child of the parent. Each new badge appears after the previous ones.

remove() Is on the Element

Call element.remove() on the element itself, not on document. The element removes itself from wherever it lives in the DOM.

NodeList Is Not an Element

querySelectorAll returns a NodeList (a collection), not a single element. Use forEach to work with each element. nodeList.textContent gives undefined.

This Pattern Is Safe by Default

createElement + textContent + classList.add + appendChild — no innerHTML, no injection risk. The build pattern is inherently safe.

What's Next: The Bigger Picture

I took a moment to look back at where I'd been. Five stations. Five sets of skills. I can find elements, read their content, change their text, toggle their classes, update their attributes, and now — create entirely new elements from scratch and remove them when they're no longer needed.

That's a real toolkit. Not just a list of methods, but a way of thinking about the page as something I can shape and rebuild.

But the journey taught me something beyond DOM methods. It taught me how to learn. How to read error messages, how to test assumptions, how to break things and figure out why. That's what Station 6 is about — not a new DOM concept, but a new way of learning. 🟠