Dynamic Element Creation & Removal0%
Styling with classList

Dynamic Element Creation & Removal

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Dynamic Element Creation & Removal in Modern JavaScript

Modern Single Page Applications (SPAs) and dynamic web interfaces constantly generate, insert, replace, and remove elements in response to user actions and API responses. Mastering these DOM APIs without inducing layout thrashing or security vulnerabilities is a fundamental skill.

1. Creating Elements with createElement()

The standard and safest way to create new DOM elements programmatically is document.createElement(tagName):

JavaScript
// Step 1: Create the element
const notification = document.createElement('div');
 
// Step 2: Configure properties and attributes
notification.className = 'toast toast-success';
notification.setAttribute('role', 'alert');
notification.textContent = 'Profile settings saved successfully!';
 
// Step 3: Append to the target container
document.body.appendChild(notification);

2. Modern Insertion Methods: append(), prepend(), before(), after()

Modern JavaScript provides powerful element-insertion methods that accept multiple nodes and raw text strings simultaneously:

Output
Parent Container
┌──────────────────────────┐
│ .before() (outer top) │
│ ┌──────────────────────┐ │
│ │ .prepend() (inside) │ │
│ │ Existing Child │ │
│ │ .append() (inside) │ │
│ └──────────────────────┘ │
│ .after() (outer bottom) │
└──────────────────────────┘
JavaScript
const list = document.querySelector('#task-list');
 
const newTask = document.createElement('li');
newTask.textContent = 'Refactor State Management';
 
// Insert at end of container
list.append(newTask);
 
// Insert at beginning of container
const priorityTask = document.createElement('li');
priorityTask.textContent = 'URGENT: Deploy Hotfix';
list.prepend(priorityTask);
 
// Insert outside relative to existing node
priorityTask.after(newTask);

3. High-Performance Batch Insertion: DocumentFragment

When inserting dozens or hundreds of elements, appending each node one-by-one causes repeated DOM reflows and repaints. A DocumentFragment acts as an in-memory virtual container that inserts all children in a single DOM operation.

JavaScript
function renderUserDirectory(users) {
const container = document.querySelector('#user-grid');
// Create an in-memory fragment
const fragment = document.createDocumentFragment();
 
users.forEach(user => {
const card = document.createElement('div');
card.className = 'user-card';
 
const heading = document.createElement('h3');
heading.textContent = user.name;
 
const email = document.createElement('p');
email.textContent = user.email;
 
card.append(heading, email);
fragment.appendChild(card); // Appends to fragment in-memory, no DOM reflow!
});
 
// Single DOM operation triggers only ONE reflow
container.appendChild(fragment);
}

4. Removing Elements: remove() vs. removeChild()

Modern remove()

Removes an element directly from the DOM:

JavaScript
const banner = document.querySelector('#promo-banner');
if (banner) {
banner.remove(); // Direct removal
}

Legacy removeChild()

Requires calling from the parent node:

JavaScript
const parent = banner.parentNode;
parent.removeChild(banner);

5. Security Alert: innerHTML vs. textContent / createElement

Using element.innerHTML = userInput exposes your application to Cross-Site Scripting (XSS) attacks.

JavaScript
// DANGEROUS: If comment contains '<img src=x onerror="stealCookies()">'
commentDiv.innerHTML = userComment; // XSS VULNERABILITY!
 
// SAFE: Characters are automatically HTML-escaped
commentDiv.textContent = userComment;
 
// SAFE: Programmatic creation
const safeP = document.createElement('p');
safeP.textContent = userComment;
commentDiv.appendChild(safeP);
Interactive Quiz

Practice Quiz

Question 1
Why is using DocumentFragment recommended when inserting hundreds of DOM elements?
Question 2
What is the primary difference between element.append() and element.appendChild()?
Question 3
How do you safely remove an element el directly from the DOM in modern JavaScript?
Question 4
Which property prevents XSS when injecting user-submitted text into a <span>?
Question 5
Which method inserts a newly created node immediately BEFORE a target element in the DOM tree?
Next Lesson

Styling with classList

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Traversing DOM NodesStyling with classList

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext