-
Hajipur, Bihar, 844101
Hajipur, Bihar, 844101
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts
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.
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.
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.
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.
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.
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.
<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.
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.
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.
Select a <div>
with the ID content
and replace its HTML with <p>New paragraph added via JavaScript</p>
.
Select an <h1>
element and replace the entire element using outerHTML
with <h1>Replaced Heading</h1>
.
Select a <p>
element and change only its text content using innerText
to "This is updated text"
.
Select a <span>
element and change its text content using textContent
to "Updated text using textContent"
.
Select an <h2>
element and replace it entirely with plain text using outerText
.
Create a new <div>
element, add a paragraph inside it using innerHTML
, and append it to the <body>
.
Select all elements with the class item
and prepend "Item updated: "
to their current HTML using innerHTML
.
Create a dynamic list of three <li>
items using innerHTML
inside a <ul>
element with ID myList
.
Select an input element and, upon clicking a button, display its value inside a <div>
using innerHTML
.
Select a <div>
container and replace all its child content with a new HTML structure using innerHTML
that includes an <h3>
and a paragraph.
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 Functions
Function Definitions
Function Parameters
Function Invocation
Function Call
Function Apply
Function Bind
Function Closures
JS Arrow Function
JS Objects
JS Objects
JS Object Properties
JS Object Methods
JS Object Display
JS Object Constructors
Object Definitions
Object Get / Set
Object Prototypes
Object Protection
JS Classes & Modules
JS Async Programming
JS Advanced
JS Destructuring
JS Bitwise
JS RegExp
JS Precedence
JS Errors
JS Scope
JS Hoisting
JS Strict Mode
JS this Keyword
JS HTML DOM
DOM Intro
DOM Methods
DOM Document
DOM Elements
DOM HTML
DOM Forms
DOM CSS
DOM Animations
DOM Events
DOM Event Listener
DOM Navigation
DOM Nodes
DOM Collections
DOM Node Lists
JS BOM (Browser Object Model)
JS Web APIs
Web API Intro
Web Validation API
Web History API
Web Storage API
Web Worker API
Web Fetch API
Web Geolocation API
JS AJAX
AJAX Intro
AJAX XMLHttp
AJAX Request
AJAX Response
AJAX XML File
AJAX PHP
AJAX ASP
AJAX Database
AJAX Applications
AJAX Examples
JS JSON
JSON Intro
JSON Syntax
JSON vs XML
JSON Data Types
JSON Parse
JSON Stringify
JSON Objects
JSON Arrays
JSON Server
JSON PHP
JSON HTML
JSON JSONP
JS Graphics & Charts