Creating and Inserting Elements
Build new nodes with createElement and append.
Creating and Inserting Elements is a free JavaScript Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the JavaScript Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.
Building New Elements
Instead of writing HTML strings, you can construct elements in code. This avoids XSS and gives you a real element reference to configure.
createElement
document.createElement makes a new, detached element. It exists in memory but is not yet in the page.
const li = document.createElement("li");
li.textContent = "New item";Configuring Before Inserting
Set classes, attributes, and content while the element is still detached. It only becomes visible once you insert it.
const btn = document.createElement("button");
btn.textContent = "Save";
btn.className = "primary";append
append adds nodes (or strings) as the last children of an element. It can take multiple arguments.
const list = document.querySelector("ul");
list.append(li);prepend
prepend inserts nodes as the first children, pushing existing children down.
list.prepend(document.createElement("li"));append Accepts Strings
Unlike the older appendChild, append can take plain strings and multiple arguments at once.
const p = document.createElement("p");
p.append("Hello, ", document.createElement("br"), "World");appendChild
appendChild is the classic method. It accepts only one node and returns it, while append returns undefined.
const node = list.appendChild(document.createElement("li"));insertBefore
insertBefore places a new node before a specific existing child, giving precise positioning.
const ref = list.children[1];
list.insertBefore(li, ref);insertAdjacentElement
insertAdjacentElement inserts relative to an element using positions like beforebegin, afterbegin, beforeend, and afterend.
ref.insertAdjacentElement("beforebegin", li);DocumentFragment for Batches
When adding many elements, build them in a DocumentFragment first, then insert once. This minimizes reflows and is faster.
const frag = document.createDocumentFragment();
for (let i = 0; i < 3; i++) {
const item = document.createElement("li");
item.textContent = "Row " + i;
frag.append(item);
}
list.append(frag);cloneNode
cloneNode(true) copies an element and its descendants, useful for templating repeated structures.
const copy = li.cloneNode(true);
list.append(copy);Quick Check
Choose the best technique.
Recap
Use createElement to build detached elements, configure them, then insert with append/prepend (strings allowed, multiple args), appendChild (single node), or insertBefore/insertAdjacentElement for precise positions. Batch many inserts through a DocumentFragment, and reuse structures with cloneNode(true).
Frequently asked questions
Is the “Creating and Inserting Elements” lesson free?
Yes — the full text of “Creating and Inserting Elements” is free to read here on the web, and the JavaScript Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the JavaScript Academy course, upgrade to CoddyKit PRO.
What will I learn in “Creating and Inserting Elements”?
Build new nodes with createElement and append. You practise JavaScript Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.
Do I need any experience to start JavaScript Academy?
No prior experience is required. JavaScript Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.
How long does the “Creating and Inserting Elements” lesson take?
Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.
Can I write and run code in this JavaScript Academy lesson?
Yes. Every JavaScript Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.
All lessons in this course
- Changing Text and HTML Content
- Creating and Inserting Elements
- Modifying Attributes and Classes
- Removing and Replacing Nodes