Frontend Master

JavaScript Curriculum

Creating & Removing Elements
+50 XP

Creating & Removing Elements

easy
~30 min·50 XP

The coffee shop menu is now fetched from a server. Instead of hardcoding cards in HTML, JavaScript needs to create them on the fly from data — building each card element, populating it, and inserting it into the page.

Creating & Removing Elements

querySelector finds elements that already exist. createElement builds new ones. This is how every dynamic UI works — fetch some data, build the elements, insert them.

The createElement Workflow

Follow the four steps from element creation to DOM insertion:

create-element.js1/4
Code
const card = document.createElement('div')
// Creates: <div></div>
// Lives in memory only — NOT on the page yet

createElement creates a new element in memory. It is detached — not visible until you append it to the DOM.

Result
<div></div>
💡Build fully in memory, then insert once
Set all properties, add all children, and build the full structure before calling append(). Every DOM insertion can trigger a layout recalculation — doing one insert at the end is always faster than inserting each child one by one.

Live DOM Builder

Try adding and removing cards dynamically:

dom-builder.js2 cards
Espresso£2.50id:1
Cappuccino£3.50id:2
// DOM ready
ℹ️append vs appendChild
Both insert a node at the end of the parent. append() is newer and more flexible — it accepts multiple arguments and plain strings. appendChild() only accepts one Node. Prefer append() in modern code.

cloneNode & the template Element

When you need many copies of the same structure, cloning is faster than building from scratch:

clone-node.js

Copies the element AND all its descendants. The most common usage.

Original element
<div class="card" data-id="1">
  <h3>Espresso</h3>
  <p class="price">£2.50</p>
</div>
Cloned result
<div class="card" data-id="1">
  <h3>Espresso</h3>   ← copied
  <p class="price">£2.50</p>  ← copied
</div>
Full code example
const card = document.querySelector('.card')
const clone = card.cloneNode(true)

// Update clone content before inserting:
clone.dataset.id = '4'
clone.querySelector('h3').textContent = 'Cold Brew'
clone.querySelector('.price').textContent = '£3.50'

document.querySelector('.cards').append(clone)
Best use: Duplicate a template card with new data. Much faster than building from scratch with createElement.
⚠️Event listeners are NOT cloned
cloneNode copies the element and its HTML attributes, but does NOT copy event listeners attached via addEventListener. After cloning, re-attach any needed event handlers to the clone.

Your Challenge

Write a createCard(name, price) function using createElement. It should return a .card div containing an h3 (name) and a p.price (price). Create three cards and append them all at once using document.createDocumentFragment().

Challenge

Write a createCard(name, price) function that builds a .card element with an h3 and a .price paragraph, and returns it. Then call it three times and append all three cards to .cards using a DocumentFragment in a single DOM insertion.

createElementappendprependremovecloneNodeDocumentFragmenttemplate-elementbeforeafterreplaceWith
Creating & Removing Elements | Nexus Learn