Beginner-Friendly Topic
Take your time - it's perfectly normal to re-read this topic 2-3 times. Try the interactive code editor below to run code yourself. Use the Q&A section to check your understanding before moving on. You've got this! 🚀
Creating & Removing Elements
Dynamically create elements with JavaScript - add items to lists, build cards from data, render search results. This is the foundation of dynamic web applications and how frameworks like React work under the hood.
Creating & Removing
- createElement(tag) - Create new element: document.createElement('div')
- append/appendChild - Add to end: parent.append(child). append can add text too
- prepend - Add to beginning: parent.prepend(child)
- insertBefore - Insert before a specific element
- remove() - Remove element: element.remove()
- replaceWith - Replace element with another: old.replaceWith(newElement)
- DocumentFragment - Batch DOM updates for performance (avoid multiple reflows)
Creating & Removing Code
// Create and add element
function addListItem(text) {
const li = document.createElement("li");
li.textContent = text;
li.className = "list-item";
// document.querySelector("ul").append(li);
}
// Create complex element
function createCard(user) {
const card = document.createElement("div");
card.className = "card";
card.innerHTML = `
<h3>${user.name}</h3>
<p>${user.email}</p>
<button class="delete-btn" data-id="${user.id}">Delete</button>
`;
return card;
}
// Render list from data
function renderUsers(users) {
const container = document.createElement("div");
// Using DocumentFragment for performance
const fragment = document.createDocumentFragment();
users.forEach(user => {
fragment.appendChild(createCard(user));
});
container.appendChild(fragment); // single DOM update!
}
// Remove element
function removeItem(element) {
element.remove(); // modern way
// element.parentNode.removeChild(element); // old way
}
// Clear all children
function clearContainer(selector) {
const container = document.querySelector(selector);
if (container) container.innerHTML = "";
}
console.log("Element creation/removal demonstrated");Tip
Tip
Use DocumentFragment for batch DOM operations. Creating 100 elements and appending them one by one causes 100 reflows. Appending them to a fragment first, then appending the fragment once, causes only 1 reflow - massive performance gain.
The DOM represents HTML as a tree of nodes that JavaScript can manipulate
Common Mistake
Warning
Using innerHTML with user-provided content creates XSS vulnerabilities. Never do element.innerHTML = userInput. Use textContent for text (safe, escapes HTML) or create elements programmatically with createElement.
Practice Task
Note
Build a dynamic list: (1) Create an input and 'Add' button. (2) On click, create a new li element with the input value. (3) Add a delete button to each li that removes it. (4) Use DocumentFragment when adding multiple items at once.
Quick Quiz
Key Takeaways
- Dynamically create elements with JavaScript - add items to lists, build cards from data, render search results.
- createElement(tag) - Create new element: document.createElement('div')
- append/appendChild - Add to end: parent.append(child). append can add text too
- prepend - Add to beginning: parent.prepend(child)