JavaScript DOM HTML

Manipulating HTML content and structure with JavaScript

🏗️ What is DOM HTML Manipulation?

DOM HTML manipulation means changing the HTML content, structure, and elements on your webpage using JavaScript. You can add, remove, or modify any HTML element dynamically! 


// Change HTML content
document.getElementById("demo").innerHTML = "<h2>New HTML Content!</h2>";

// Create new HTML elements
let newDiv = document.createElement("div");
newDiv.innerHTML = "<p>I'm a new paragraph!</p>";

HTML Manipulation Methods

📝

innerHTML

Change HTML content inside elements 

element.innerHTML = "<b>Bold</b>"
➕

createElement()

Create new HTML elements 

document.createElement("div")
📎

appendChild()

Add elements to the page 

parent.appendChild(child)
🗑️

removeChild()

Remove elements from the page 

parent.removeChild(child)

🔹 Changing HTML Content

The easiest way to change HTML is using innerHTML: 

<div id="content">
    <p>Original content</p>
</div>
<button onclick="changeContent()">Change Content</button>
<button onclick="addContent()">Add Content</button>

<script>
function changeContent() {
    document.getElementById("content").innerHTML = 
        "<h3>New Title</h3><p>This is completely new content!</p>";
}

function addContent() {
    let currentContent = document.getElementById("content").innerHTML;
    document.getElementById("content").innerHTML = 
        currentContent + "<p>Added paragraph!</p>";
}
</script>

Try it:

Original content

🔹 Creating New Elements

You can create new HTML elements and add them to your page: 

// Step 1: Create a new element
let newParagraph = document.createElement("p");

// Step 2: Add content to the element
newParagraph.innerHTML = "I'm a new paragraph!";

// Step 3: Style the element (optional)
newParagraph.style.color = "blue";
newParagraph.style.backgroundColor = "lightgray";

// Step 4: Add it to the page
document.body.appendChild(newParagraph);

🔸 Complete Example: 

<div id="container">
    <h3>Dynamic Content Area</h3>
</div>
<button onclick="addNewElement()">Add New Element</button>

<script>
let elementCount = 0;

function addNewElement() {
    // Create new div
    let newDiv = document.createElement("div");
    
    // Create new paragraph
    let newParagraph = document.createElement("p");
    
    // Add content
    elementCount++;
    newParagraph.innerHTML = "Dynamic element #" + elementCount;
    
    // Style the elements
    newDiv.style.backgroundColor = "lightblue";
    newDiv.style.padding = "10px";
    newDiv.style.margin = "5px";
    newDiv.style.borderRadius = "5px";
    
    // Put paragraph inside div
    newDiv.appendChild(newParagraph);
    
    // Add div to container
    document.getElementById("container").appendChild(newDiv);
}
</script>

Try it:

Dynamic Content Area

🔹 Removing Elements

You can remove elements from your page: 

// Method 1: Remove child from parent
let parent = document.getElementById("container");
let child = document.getElementById("elementToRemove");
parent.removeChild(child);

// Method 2: Remove element directly (modern way)
let element = document.getElementById("elementToRemove");
element.remove();

🔸 Interactive Remove Example: 

<div id="removeContainer">
    <div class="removable-item">Item 1 <button onclick="removeThis(this)">Remove</button></div>
    <div class="removable-item">Item 2 <button onclick="removeThis(this)">Remove</button></div>
    <div class="removable-item">Item 3 <button onclick="removeThis(this)">Remove</button></div>
</div>
<button onclick="addRemovableItem()">Add New Item</button>

<script>
let itemCount = 3;

function removeThis(button) {
    // Remove the parent div of the button
    button.parentElement.remove();
}

function addRemovableItem() {
    itemCount++;
    let container = document.getElementById("removeContainer");
    let newItem = document.createElement("div");
    newItem.className = "removable-item";
    newItem.innerHTML = "Item " + itemCount + " <button onclick='removeThis(this)'>Remove</button>";
    container.appendChild(newItem);
}
</script>

Try it:

Item 1
Item 2
Item 3

🔹 Replacing Elements

You can replace one element with another: 

// Create a new element
let newElement = document.createElement("h2");
newElement.innerHTML = "I'm the replacement!";
newElement.style.color = "green";

// Replace the old element
let oldElement = document.getElementById("replaceMe");
oldElement.parentNode.replaceChild(newElement, oldElement);

🔸 Replace Example: 

<p id="replaceDemo">I can be replaced!</p>
<button onclick="replaceWithHeading()">Replace with Heading</button>
<button onclick="replaceWithImage()">Replace with Image</button>

<script>
function replaceWithHeading() {
    let newHeading = document.createElement("h2");
    newHeading.innerHTML = "I'm a heading now!";
    newHeading.style.color = "purple";
    newHeading.id = "replaceDemo"; // Keep the same ID
    
    let oldElement = document.getElementById("replaceDemo");
    oldElement.parentNode.replaceChild(newHeading, oldElement);
}

function replaceWithImage() {
    let newImage = document.createElement("div");
    newImage.innerHTML = "🖼️ I'm an image placeholder!";
    newImage.style.backgroundColor = "lightgray";
    newImage.style.padding = "20px";
    newImage.style.textAlign = "center";
    newImage.id = "replaceDemo";
    
    let oldElement = document.getElementById("replaceDemo");
    oldElement.parentNode.replaceChild(newImage, oldElement);
}
</script>

🧠 Test Your Knowledge

Which method is used to create a new HTML element?