DOM Manipulation

✨ Creating New Elements

JavaScript allows you to create new HTML elements dynamically and add them to the DOM. This is essential for building interactive web applications.

JavaScript Editor

// Creating and Adding Elements
console.log("=== CREATING NEW ELEMENTS ===");

// Create element
const newDiv = document.createElement('div');
newDiv.id = 'new-div';
newDiv.className = 'card';
newDiv.innerHTML = '<h3>New Card</h3><p>This was created dynamically!</p>';

// Add styles
newDiv.style.backgroundColor = '#f8f9fa';
newDiv.style.padding = '20px';
newDiv.style.border = '1px solid #dee2e6';
newDiv.style.borderRadius = '5px';
newDiv.style.margin = '10px 0';

// Create text node
const textNode = document.createTextNode('Additional text content');
newDiv.appendChild(textNode);

// Add to body
document.body.appendChild(newDiv);
console.log("New div added to body!");

// Create list with multiple items
const newList = document.createElement('ul');
newList.id = 'dynamic-list';

for (let i = 1; i <= 5; i++) {
  const listItem = document.createElement('li');
  listItem.textContent = `Dynamic Item ${i}`;
  listItem.className = 'list-item';
  listItem.style.padding = '5px';
  listItem.style.borderBottom = '1px solid #eee';
  newList.appendChild(listItem);
}

// Insert after the newDiv
newDiv.insertAdjacentElement('afterend', newList);
console.log("New list added!");

// Create using template literal
const template = `
<div class="template-card">
  <h4>Created from Template</h4>
  <p>This uses template literals for HTML</p>
  <button class="template-btn">Click Me</button>
</div>
`;

const templateContainer = document.createElement('div');
templateContainer.innerHTML = template;
document.body.appendChild(templateContainer);

console.log("\nAll created elements:", document.body.children.length);

Creation Methods:

createElement(tagName) - Creates new element
createTextNode(text) - Creates text node
createDocumentFragment() - Lightweight DOM container

Insertion Methods:

appendChild(node) - Adds as last child
insertBefore(new, reference) - Inserts before element
insertAdjacentElement(position, element) - Flexible insertion

🎨 Modifying Existing Elements

You can modify element content, styles, classes, and attributes to create dynamic user interfaces that respond to user interactions.

JavaScript Editor

// Modifying Existing Elements
console.log("=== MODIFYING ELEMENTS ===");

// Get reference element
const container = document.getElementById('container') || document.body;

// 1. Change Content
console.log("1. Changing content...");
const elements = container.getElementsByTagName('*');
if (elements.length > 0) {
  elements[0].textContent = 'First element text changed!';
  elements[0].innerHTML = '<strong>Bold text</strong> with <em>italics</em>';
}

// 2. Change Styles
console.log("\n2. Changing styles...");
Array.from(elements).forEach((el, index) => {
  if (index < 3) { // Style first 3 elements
    el.style.backgroundColor = index % 2 === 0 ? '#e3f2fd' : '#f3e5f5';
    el.style.padding = '10px';
    el.style.margin = '5px';
    el.style.borderRadius = '3px';
  }
});

// 3. Change Classes
console.log("\n3. Managing classes...");
const classElements = container.getElementsByClassName('item') || 
                      container.getElementsByTagName('div');
                      
if (classElements.length > 0) {
  const firstEl = classElements[0];
  
  // Add class
  firstEl.classList.add('highlight', 'active');
  console.log("Added classes:", firstEl.className);
  
  // Remove class
  firstEl.classList.remove('active');
  console.log("After removing 'active':", firstEl.className);
  
  // Toggle class
  firstEl.classList.toggle('highlight');
  console.log("After toggle:", firstEl.className);
  
  // Check class
  console.log("Has 'highlight'?", firstEl.classList.contains('highlight'));
}

// 4. Change Attributes
console.log("\n4. Changing attributes...");
const allButtons = container.getElementsByTagName('button');
if (allButtons.length > 0) {
  const button = allButtons[0];
  button.setAttribute('title', 'Click this button');
  button.setAttribute('data-action', 'submit');
  button.setAttribute('disabled', 'true');
  
  console.log("Button attributes:");
  console.log("Title:", button.getAttribute('title'));
  console.log("Data-action:", button.getAttribute('data-action'));
  console.log("Disabled:", button.hasAttribute('disabled'));
  
  // Remove attribute
  button.removeAttribute('disabled');
  console.log("Disabled after removal:", button.hasAttribute('disabled'));
}

// 5. Change Dimensions
console.log("\n5. Changing dimensions...");
const divs = container.getElementsByTagName('div');
if (divs.length > 0) {
  const sampleDiv = divs[0];
  sampleDiv.style.width = '300px';
  sampleDiv.style.height = '150px';
  sampleDiv.style.overflow = 'auto';
  sampleDiv.style.border = '2px solid #4caf50';
  
  console.log("Dimensions set: 300x150px with scroll");
}

Content Modification:

textContent - Plain text
innerHTML - HTML content
innerText - Visible text (slower)

Class Management:

classList.add() - Add classes
classList.remove() - Remove classes
classList.toggle() - Toggle classes
classList.contains() - Check class

Style Management:

element.style.property - Inline styles
setAttribute('style', '...')
cssText - Batch style changes

🗑️ Removing and Replacing Elements

Removing elements from the DOM is just as important as creating them. This helps maintain clean, efficient, and user-friendly interfaces.

JavaScript Editor

// Removing and Replacing Elements
console.log("=== REMOVING ELEMENTS ===");

const container = document.getElementById('container') || document.body;

// 1. Remove child
console.log("1. Removing child elements...");
const children = container.children;
if (children.length > 2) {
  const lastChild = children[children.length - 1];
  container.removeChild(lastChild);
  console.log("Removed last child");
}

// 2. Remove specific element
console.log("\n2. Removing by selector...");
const elementsToRemove = container.querySelectorAll('.item, .description');
elementsToRemove.forEach((el, index) => {
  el.parentNode.removeChild(el);
  console.log(`Removed element ${index + 1}`);
});

// 3. Remove all children
console.log("\n3. Clearing container...");
const tempContainer = document.createElement('div');
tempContainer.id = 'temp-container';
tempContainer.innerHTML = `
  <p>Item 1</p>
  <p>Item 2</p>
  <p>Item 3</p>
  <p>Item 4</p>
`;

document.body.appendChild(tempContainer);
console.log("Before clearing:", tempContainer.children.length);

// Method 1: while loop (fastest)
while (tempContainer.firstChild) {
  tempContainer.removeChild(tempContainer.firstChild);
}
console.log("After clearing:", tempContainer.children.length);

// 4. Replace element
console.log("\n4. Replacing elements...");
const replacementContainer = document.createElement('div');
replacementContainer.id = 'replacement';
replacementContainer.innerHTML = `
  <h3>Replaced Content</h3>
  <p>This content replaced the old container</p>
  <button>New Button</button>
`;

// Replace tempContainer with replacementContainer
tempContainer.parentNode.replaceChild(replacementContainer, tempContainer);
console.log("Container replaced!");

// 5. Remove element completely
console.log("\n5. Removing element from DOM...");
setTimeout(() => {
  if (replacementContainer.parentNode) {
    replacementContainer.parentNode.removeChild(replacementContainer);
    console.log("Element completely removed from DOM");
  }
}, 1000);

console.log("\nCurrent child count:", container.children.length);

💡 Performance Tip:

When removing multiple children, use while (element.firstChild) loop instead of multiple removeChild() calls for better performance. Or use element.innerHTML = '' for simple cases.

📱 Practical Application: Todo List

Let's build a complete Todo List application using DOM manipulation techniques. This practical example demonstrates real-world usage of creating, modifying, and removing elements.

JavaScript Editor

// Practical DOM Manipulation - Todo List
console.log("=== TODO LIST APPLICATION ===");

// Create todo list container
const todoApp = document.createElement('div');
todoApp.id = 'todo-app';
todoApp.style.padding = '20px';
todoApp.style.backgroundColor = '#f5f5f5';
todoApp.style.borderRadius = '8px';
todoApp.style.maxWidth = '500px';
todoApp.style.margin = '20px auto';

// Add title
const title = document.createElement('h2');
title.textContent = '📝 My Todo List';
title.style.color = '#333';
todoApp.appendChild(title);

// Create input and button
const inputContainer = document.createElement('div');
inputContainer.style.display = 'flex';
inputContainer.style.gap = '10px';
inputContainer.style.marginBottom = '20px';

const todoInput = document.createElement('input');
todoInput.type = 'text';
todoInput.placeholder = 'Add a new task...';
todoInput.style.flex = '1';
todoInput.style.padding = '10px';
todoInput.style.border = '2px solid #4caf50';
todoInput.style.borderRadius = '4px';

const addButton = document.createElement('button');
addButton.textContent = 'Add Task';
addButton.style.padding = '10px 20px';
addButton.style.backgroundColor = '#4caf50';
addButton.style.color = 'white';
addButton.style.border = 'none';
addButton.style.borderRadius = '4px';
addButton.style.cursor = 'pointer';

inputContainer.appendChild(todoInput);
inputContainer.appendChild(addButton);
todoApp.appendChild(inputContainer);

// Create todo list
const todoList = document.createElement('ul');
todoList.id = 'todo-list';
todoList.style.listStyle = 'none';
todoList.style.padding = '0';
todoApp.appendChild(todoList);

// Add to body
document.body.appendChild(todoApp);

// Task counter
let taskId = 1;

// Function to add task
function addTask(taskText) {
  if (!taskText.trim()) return;
  
  const listItem = document.createElement('li');
  listItem.id = `task-${taskId}`;
  listItem.style.padding = '12px';
  listItem.style.marginBottom = '8px';
  listItem.style.backgroundColor = 'white';
  listItem.style.borderRadius = '4px';
  listItem.style.boxShadow = '0 2px 4px rgba(0,0,0,0.1)';
  listItem.style.display = 'flex';
  listItem.style.justifyContent = 'space-between';
  listItem.style.alignItems = 'center';
  
  // Task text
  const taskSpan = document.createElement('span');
  taskSpan.textContent = `${taskId}. ${taskText}`;
  
  // Action buttons
  const buttonContainer = document.createElement('div');
  buttonContainer.style.display = 'flex';
  buttonContainer.style.gap = '8px';
  
  const completeButton = document.createElement('button');
  completeButton.textContent = '✓';
  completeButton.style.backgroundColor = '#4caf50';
  completeButton.style.color = 'white';
  completeButton.style.border = 'none';
  completeButton.style.borderRadius = '50%';
  completeButton.style.width = '30px';
  completeButton.style.height = '30px';
  completeButton.style.cursor = 'pointer';
  
  const deleteButton = document.createElement('button');
  deleteButton.textContent = '✗';
  deleteButton.style.backgroundColor = '#f44336';
  deleteButton.style.color = 'white';
  deleteButton.style.border = 'none';
  deleteButton.style.borderRadius = '50%';
  deleteButton.style.width = '30px';
  deleteButton.style.height = '30px';
  deleteButton.style.cursor = 'pointer';
  
  // Add event listeners
  completeButton.addEventListener('click', function() {
    taskSpan.style.textDecoration = 'line-through';
    taskSpan.style.color = '#888';
    listItem.style.backgroundColor = '#e8f5e9';
    completeButton.disabled = true;
  });
  
  deleteButton.addEventListener('click', function() {
    todoList.removeChild(listItem);
    updateTaskNumbers();
  });
  
  // Assemble the task item
  buttonContainer.appendChild(completeButton);
  buttonContainer.appendChild(deleteButton);
  listItem.appendChild(taskSpan);
  listItem.appendChild(buttonContainer);
  todoList.appendChild(listItem);
  
  // Clear input and increment counter
  todoInput.value = '';
  taskId++;
  
  console.log(`Added task: "${taskText}"`);
}

// Update task numbers after deletion
function updateTaskNumbers() {
  const tasks = todoList.querySelectorAll('li');
  tasks.forEach((task, index) => {
    const taskSpan = task.querySelector('span');
    const taskText = taskSpan.textContent.split('. ').slice(1).join('. ');
    taskSpan.textContent = `${index + 1}. ${taskText}`;
  });
  console.log("Updated task numbers");
}

// Add button event listener
addButton.addEventListener('click', () => {
  addTask(todoInput.value);
});

// Add on Enter key
todoInput.addEventListener('keypress', (e) => {
  if (e.key === 'Enter') {
    addTask(todoInput.value);
  }
});

// Add sample tasks
addTask('Learn DOM Manipulation');
addTask('Build a Todo App');
addTask('Practice JavaScript');
addTask('Master CSS Styling');

console.log("Todo list application created!");
console.log("Try adding new tasks using the input field.");

🚀 Enhanced Features to Try:

Add localStorage to save tasks between page reloads
Implement drag-and-drop to reorder tasks
Add due dates and priority levels to tasks
Create filters (All/Active/Completed)
Add task editing functionality

📋 DOM Manipulation Best Practices

Performance Tips:

Minimize DOM access (cache references)
Use DocumentFragment for multiple inserts
Batch style changes
Use event delegation

Security Tips:

Avoid innerHTML with user input
Use textContent for plain text
Sanitize HTML before insertion
Validate all user inputs

Common Methods:

cloneNode() - Clone elements
contains() - Check if contains node
matches() - Check if matches selector
getBoundingClientRect() - Get position

← DOM Introduction Events →

Frontend

JavaScript & Frameworks

Backend

Artificial Intelligence

Database

CSS Frameworks

Data Analytics

Digital Marketing

Frontend

Backend

Artificial Intelligence

DevOps

Database

Cyber Security

JavaScript Tutorial

DOM Manipulation

✨ Creating New Elements

Creation Methods:

Insertion Methods:

🎨 Modifying Existing Elements

Content Modification:

Class Management:

Style Management:

🗑️ Removing and Replacing Elements

💡 Performance Tip:

📱 Practical Application: Todo List

🚀 Enhanced Features to Try:

📋 DOM Manipulation Best Practices

Performance Tips:

Security Tips:

Common Methods:

Follow Us

Our Tools

Our Company

Special Tools