JavaScript

coding learning websites codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

JavaScript DOM HTML


What is DOM HTML?

DOM HTML refers to the way JavaScript interacts with the HTML content of a webpage. Using DOM HTML methods and properties, you can read, update, or modify HTML content inside elements dynamically.

While the Document object represents the entire page and DOM elements represent individual tags, DOM HTML focuses on the content inside those elements—including text, HTML structure, and inner markup.

Every HTML element, such as <div>, <p>, <h1>, or <span>, has properties that allow you to control both the text and the HTML inside it. Understanding DOM HTML is essential for creating interactive and responsive web pages.

Why DOM HTML is Important

Manipulating HTML content using JavaScript is essential because it allows you to:

  • Update page content dynamically without reloading the page.

  • Add or remove HTML elements inside a container dynamically.

  • Create interactive webpages that respond to user actions.

  • Control user-generated content safely and efficiently.

  • Combine with events and animations to build dynamic interfaces.

Without DOM HTML, web pages remain static and cannot adapt based on user input or real-time data.

Key DOM HTML Properties

innerHTML

innerHTML is the most commonly used property to get or set HTML content of an element. It includes all child elements and HTML tags inside the selected element.

let container = document.getElementById("content");
console.log(container.innerHTML); // Get current HTML

container.innerHTML = "<p>New paragraph added dynamically</p>";

Use case: Adding new content to a blog post or updating a product description dynamically.

outerHTML

outerHTML includes the element itself plus its content.

let heading = document.querySelector("h1");
console.log(heading.outerHTML); // Shows <h1>Heading Text</h1>

heading.outerHTML = "<h1>Replaced Heading</h1>";

Use case: Completely replacing an element with a new structure without altering other parts of the DOM.

innerText

innerText gets or sets only the visible text of an element, ignoring HTML tags inside it. It respects CSS styling like display: none.

let para = document.querySelector("p");
console.log(para.innerText); // Get visible text

para.innerText = "This is plain text now"; // Set text only

Use case: Displaying text updates without affecting the HTML structure.

textContent

textContent is similar to innerText but ignores CSS visibility and retrieves all text content, including hidden text.

let div = document.querySelector("#container");
console.log(div.textContent); // Get all text inside div

div.textContent = "Updated text content"; // Set all text

Use case: Extracting all textual content from a container, regardless of visibility.

outerText

outerText replaces an element entirely with text, removing its original tag.

let heading = document.querySelector("h2");
heading.outerText = "Heading replaced with text only";

Use case: Converting headings or sections to plain text dynamically.

Modifying HTML Content Dynamically

You can use DOM HTML properties to update web page content based on user actions or events.

<div id="info">
    <h2>Old Heading</h2>
    <p>Old paragraph content.</p>
</div>
<button id="updateBtn">Update Content</button>
document.getElementById("updateBtn").addEventListener("click", function() {
    let infoDiv = document.getElementById("info");
    infoDiv.innerHTML = "<h2>New Heading</h2><p>New paragraph content added dynamically.</p>";
});

Clicking the button updates the HTML inside the div instantly without reloading the page.

Advanced Examples

Updating Multiple Elements

let items = document.querySelectorAll(".item");
items.forEach((item, index) => {
    item.innerHTML = `<strong>Item ${index + 1}</strong> updated`;
});

Use case: Updating list items or repeated elements dynamically.

Combining innerHTML with createElement

let container = document.getElementById("container");
let newDiv = document.createElement("div");
newDiv.innerHTML = "<p>This is a new paragraph inside a dynamically created div.</p>";
container.appendChild(newDiv);

This allows nested HTML structures to be added programmatically.

Updating HTML Based on Input

<input type="text" id="userInput" placeholder="Enter text">
<button id="submitBtn">Submit</button>
<div id="display"></div>
document.getElementById("submitBtn").addEventListener("click", function() {
    let input = document.getElementById("userInput").value;
    document.getElementById("display").innerHTML = `<p>You entered: ${input}</p>`;
});

Use case: Displaying user-generated content dynamically in real-time.

Best Practices

  • Prefer textContent or innerText when only text updates are needed for security.

  • Use innerHTML only when inserting valid HTML structure.

  • Avoid excessive innerHTML inside loops; use createElement for better performance.

  • Always sanitize user input before adding via innerHTML to prevent XSS attacks.

  • Use outerHTML only when replacing an element completely.

Summary of the Tutorial

DOM HTML properties allow you to read, modify, or replace the HTML content of elements:

  • innerHTML – Get or set HTML content inside an element.

  • outerHTML – Replace the element itself with new HTML.

  • innerText – Get or set visible text content.

  • textContent – Get or set all text content, ignoring HTML and CSS.

  • outerText – Replace an element entirely with text.

Mastering DOM HTML is essential for dynamic webpages, content updates, and interactive web applications, making pages responsive to user input and real-time data.


Practice Questions

  1. Select a <div> with the ID content and replace its HTML with <p>New paragraph added via JavaScript</p>.

  2. Select an <h1> element and replace the entire element using outerHTML with <h1>Replaced Heading</h1>.

  3. Select a <p> element and change only its text content using innerText to "This is updated text".

  4. Select a <span> element and change its text content using textContent to "Updated text using textContent".

  5. Select an <h2> element and replace it entirely with plain text using outerText.

  6. Create a new <div> element, add a paragraph inside it using innerHTML, and append it to the <body>.

  7. Select all elements with the class item and prepend "Item updated: " to their current HTML using innerHTML.

  8. Create a dynamic list of three <li> items using innerHTML inside a <ul> element with ID myList.

  9. Select an input element and, upon clicking a button, display its value inside a <div> using innerHTML.

  10. Select a <div> container and replace all its child content with a new HTML structure using innerHTML that includes an <h3> and a paragraph.


JavaScript

online coding class codepractice

JS Basics

JS Variables & Operators

JS Data Types & Conversion

JS Numbers & Math

JS Strings

JS Dates

JS Arrays

JS Control Flow

JS Loops & Iteration

JS Functions

JS Objects

JS Classes & Modules

JS Async Programming

JS Advanced

JS HTML DOM

JS BOM (Browser Object Model)

JS Web APIs

JS AJAX

JS JSON

JS Graphics & Charts

Go Back Top