JavaScript DOM

DOM Manipulation

Learn how to create, change, and delete elements - bring your webpage to life!

Find videos you like?

Save to resource drawer for future reference!

The 4 Magic Powers

Master these 4 operations and you can do ANYTHING to a webpage

Create

Make brand new elements from scratch

createElement('div')

Read

Get text or HTML from elements

element.textContent

Update

Change text, colors, or styles

element.textContent = 'Hi!'

Delete

Remove elements from the page

element.remove()

3 Essential Operations

Click each card to see detailed examples and learn how they work

Creating Elements

Add New Content

Use when: Adding buttons, cards, or any new content dynamically

// Create element

const div = document.createElement('div');

// Add to page

body.appendChild(div);

Modifying Content

Change Existing

Use when: Updating text, changing messages, or editing content

// Change text

element.textContent = 'New text';

// Change HTML

element.innerHTML = '<b>Bold</b>';

Removing Elements

Delete Content

Use when: Deleting items, closing popups, or clearing content

// Modern way

element.remove();

// Clear all children

element.innerHTML = '';

Interactive Manipulation Playground

Try all operations yourself! Create, modify, and delete elements in real-time

Try All Operations!

Click the buttons above to create new items, change their text, modify colors, or delete them. Watch the counter update in real-time!

Quick Reference Cheat Sheet

Everything you need in one place - copy and use!

Creating Elements

document.createElement('div')

Create a <div> element

element.textContent = 'Hello'

Set text content

element.className = 'card'

Add CSS class

parent.appendChild(element)

Add to parent element

Modifying Content

element.textContent = 'New text'

Change text (safe)

element.innerHTML = '<b>Bold</b>'

Change HTML (careful!)

element.style.color = 'red'

Change inline style

element.classList.add('active')

Add CSS class

Removing Elements

element.remove()

Delete the element

parent.removeChild(child)

Remove specific child

element.innerHTML = ''

Clear all children

Styling Elements

element.style.backgroundColor = 'blue'

Change background color

element.style.display = 'none'

Hide element

element.classList.toggle('active')

Toggle CSS class

⚠️ Common Mistakes to Avoid

❌ Creating but not adding to page

❌ Wrong:

const div = document.createElement('div');
// Element exists but is invisible!

✅ Correct:

const div = document.createElement('div');
document.body.appendChild(div);
// Now it appears!

Tip: Always appendChild() after creating!

❌ Using innerHTML with user input

❌ Wrong:

element.innerHTML = userInput;
// ⚠️ XSS vulnerability!

✅ Correct:

element.textContent = userInput;
// ✅ Safe from attacks

Tip: Use textContent for user input!

❌ Removing element you still need

❌ Wrong:

element.remove();
element.textContent = 'Hi';
// Error: element is gone!

✅ Correct:

// Store reference first
const parent = element.parentElement;
element.remove();
// Can still access if needed

Tip: Be careful - remove() is permanent!

🎯 Practice Challenge

Test your knowledge! Can you write the code for these tasks?

Question 1: Create a new paragraph element with text "Hello World"

Show Answer

const p = document.createElement("p"); p.textContent = "Hello World"; document.body.appendChild(p);

Question 2: Change the text of an element to "Updated!"

Show Answer

element.textContent = "Updated!";

Question 3: Delete an element from the page

Show Answer

element.remove();

Question 4: Create a div, add class "box", and append to body

Show Answer

const div = document.createElement("div"); div.className = "box"; document.body.appendChild(div);

Previous Topic

Selecting Elements

querySelector, querySelectorAll, getElementById, and other selection methods.

Next Topic

Attributes & Classes

Managing element attributes, classList methods, and data attributes.

Ask a Question

Have a question about DOM Manipulation? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript DOM

DOM Manipulation

Learn how to create, change, and delete elements - bring your webpage to life!

Find videos you like?

Save to resource drawer for future reference!

The 4 Magic Powers

Master these 4 operations and you can do ANYTHING to a webpage

Create

Make brand new elements from scratch

createElement('div')

Read

Get text or HTML from elements

element.textContent

Update

Change text, colors, or styles

element.textContent = 'Hi!'

Delete

Remove elements from the page

element.remove()

3 Essential Operations

Click each card to see detailed examples and learn how they work

Creating Elements

Add New Content

Use when: Adding buttons, cards, or any new content dynamically

// Create element

const div = document.createElement('div');

// Add to page

body.appendChild(div);

Modifying Content

Change Existing

Use when: Updating text, changing messages, or editing content

// Change text

element.textContent = 'New text';

// Change HTML

element.innerHTML = '<b>Bold</b>';

Removing Elements

Delete Content

Use when: Deleting items, closing popups, or clearing content

// Modern way

element.remove();

// Clear all children

element.innerHTML = '';

Interactive Manipulation Playground

Try all operations yourself! Create, modify, and delete elements in real-time

Try All Operations!

Click the buttons above to create new items, change their text, modify colors, or delete them. Watch the counter update in real-time!

Quick Reference Cheat Sheet

Everything you need in one place - copy and use!

Creating Elements

document.createElement('div')

Create a <div> element

element.textContent = 'Hello'

Set text content

element.className = 'card'

Add CSS class

parent.appendChild(element)

Add to parent element

Modifying Content

element.textContent = 'New text'

Change text (safe)

element.innerHTML = '<b>Bold</b>'

Change HTML (careful!)

element.style.color = 'red'

Change inline style

element.classList.add('active')

Add CSS class

Removing Elements

element.remove()

Delete the element

parent.removeChild(child)

Remove specific child

element.innerHTML = ''

Clear all children

Styling Elements

element.style.backgroundColor = 'blue'

Change background color

element.style.display = 'none'

Hide element

element.classList.toggle('active')

Toggle CSS class

⚠️ Common Mistakes to Avoid

❌ Creating but not adding to page

❌ Wrong:

const div = document.createElement('div');
// Element exists but is invisible!

✅ Correct:

const div = document.createElement('div');
document.body.appendChild(div);
// Now it appears!

Tip: Always appendChild() after creating!

❌ Using innerHTML with user input

❌ Wrong:

element.innerHTML = userInput;
// ⚠️ XSS vulnerability!

✅ Correct:

element.textContent = userInput;
// ✅ Safe from attacks

Tip: Use textContent for user input!

❌ Removing element you still need

❌ Wrong:

element.remove();
element.textContent = 'Hi';
// Error: element is gone!

✅ Correct:

// Store reference first
const parent = element.parentElement;
element.remove();
// Can still access if needed

Tip: Be careful - remove() is permanent!

🎯 Practice Challenge

Test your knowledge! Can you write the code for these tasks?

Question 1: Create a new paragraph element with text "Hello World"

Show Answer

const p = document.createElement("p"); p.textContent = "Hello World"; document.body.appendChild(p);

Question 2: Change the text of an element to "Updated!"

Show Answer

element.textContent = "Updated!";

Question 3: Delete an element from the page

Show Answer

element.remove();

Question 4: Create a div, add class "box", and append to body

Show Answer

const div = document.createElement("div"); div.className = "box"; document.body.appendChild(div);

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Selecting Elements

Attributes & Classes

JavaScript Code Editor

Building Your Learning Module...

DOM Manipulation

Create

Read

Update

Delete

3 Essential Operations

Creating Elements

Modifying Content

Removing Elements

Try All Operations!

Creating Elements

Modifying Content

Removing Elements

Styling Elements

❌ Creating but not adding to page

❌ Using innerHTML with user input

❌ Removing element you still need

Selecting Elements

Attributes & Classes

JavaScript Code Editor

DOM Manipulation

Create

Read

Update

Delete

3 Essential Operations

Creating Elements

Modifying Content

Removing Elements

Try All Operations!

Creating Elements

Modifying Content

Removing Elements

Styling Elements

❌ Creating but not adding to page

❌ Using innerHTML with user input

❌ Removing element you still need