🎓 Top 15 Udemy Courses (80-90% Discount): My Udemy Courses - Ramesh Fadatare — All my Udemy courses are real-time and project oriented courses.

▶️ Subscribe to My YouTube Channel (178K+ subscribers): Java Guides on YouTube

▶️ For AI, ChatGPT, Web, Tech, and Generative AI, subscribe to another channel: Ramesh Fadatare on YouTube

In JavaScript, modifying the HTML content of an element is a common task when working with dynamic web pages. You can easily insert or update HTML within an element using various properties and methods. This post will cover how to change the HTML content of an element with different techniques.

Using innerHTML
Using outerHTML
Difference Between innerHTML and outerHTML
Selecting Elements by ID or Class
Conclusion

1. Using `innerHTML`

The innerHTML property allows you to get or set the HTML content inside an element. It is the most commonly used method for changing the HTML content of an element.

Example:

HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Change HTML Content</title>
</head>
<body>
  <div id="content">
    <p>This is a paragraph.</p>
  </div>
  <script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

const contentDiv = document.getElementById("content");
contentDiv.innerHTML = "<h2>Updated HTML Content</h2><p>This is a new paragraph.</p>";

Output:

<div id="content">
  <h2>Updated HTML Content</h2>
  <p>This is a new paragraph.</p>
</div>

Explanation:

document.getElementById("content") selects the <div> element with the ID "content".
innerHTML is then used to replace the existing HTML with the new content, including an <h2> element and a <p> element.

Caution with `innerHTML`:

Be careful when using innerHTML with user-generated content, as it can lead to XSS (Cross-Site Scripting) attacks if not properly sanitized.

2. Using `outerHTML`

The outerHTML property allows you to replace the entire element, including the element itself, with new HTML content.

Example:

const contentDiv = document.getElementById("content");
contentDiv.outerHTML = "<section><h2>New Section</h2><p>This is the new section content.</p></section>";

Output:

<section>
  <h2>New Section</h2>
  <p>This is the new section content.</p>
</section>

Explanation:

outerHTML not only changes the content inside the element but also replaces the entire element itself.
In this case, the <div> with the ID "content" is replaced by a <section> element.

3. Difference Between `innerHTML` and `outerHTML`

innerHTML: Modifies the content inside an element, but leaves the element itself intact.
outerHTML: Replaces the entire element, including its content and the element itself.

Example:

HTML:

<div id="exampleDiv">Original Content</div>

// innerHTML changes only the content inside the div
document.getElementById("exampleDiv").innerHTML = "<p>New Inner Content</p>";

// outerHTML replaces the entire div with a new element
document.getElementById("exampleDiv").outerHTML = "<section>New Section Content</section>";

With innerHTML:

<div id="exampleDiv">
  <p>New Inner Content</p>
</div>

With outerHTML:

<section>New Section Content</section>

4. Selecting Elements by ID or Class

Before changing the HTML content, you need to select the element. Here are some common methods:

Selecting by ID:

const element = document.getElementById("elementId");
element.innerHTML = "<p>Updated HTML Content</p>";

Selecting by Class:

const elements = document.getElementsByClassName("className");

for (let i = 0; i < elements.length; i++) {
  elements[i].innerHTML = "<p>Updated HTML for all elements with this class.</p>";
}

Selecting by Query Selector:

const element = document.querySelector(".className");
element.innerHTML = "<p>New Content</p>";

Explanation:

getElementById() selects an element by its ID.
getElementsByClassName() selects all elements with the same class name and requires looping to change multiple elements.
querySelector() selects the first element that matches the CSS selector.

5. Conclusion

Changing the HTML content of an element in JavaScript is easy and can be done using the innerHTML or outerHTML properties, depending on whether you want to replace just the content or the entire element. Always use innerHTML carefully, especially when working with dynamic or user-generated content, to avoid potential security risks.

Key Points:

innerHTML: Replaces only the content inside the element.
outerHTML: Replaces the entire element, including its content.
You can select elements using getElementById(), getElementsByClassName(), or querySelector() before modifying their HTML.

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Spring Boot + RabbitMQ Course - The Practical Guide

Related JavaScript Programs:

How to Change the HTML Content of an Element in JavaScript

Table of Contents

1. Using innerHTML

Example:

Output:

Explanation:

Caution with innerHTML:

2. Using outerHTML

Example:

Output:

Explanation:

3. Difference Between innerHTML and outerHTML

Example:

4. Selecting Elements by ID or Class

Selecting by ID:

Selecting by Class:

Selecting by Query Selector:

Explanation:

5. Conclusion

Key Points:

My Top and Bestseller Udemy Courses. The sale is going on with a 70 - 80% discount. The discount coupon has been added to each course below:

Build REST APIs with Spring Boot 4, Spring Security 7, and JWT

[NEW] Learn Apache Maven with IntelliJ IDEA and Java 25

ChatGPT + Generative AI + Prompt Engineering for Beginners

Spring 7 and Spring Boot 4 for Beginners (Includes 8 Projects)

Building Real-Time REST APIs with Spring Boot - Blog App

Building Microservices with Spring Boot and Spring Cloud

Java Full-Stack Developer Course with Spring Boot and React JS

Build 5 Spring Boot Projects with Java: Line-by-Line Coding

Testing Spring Boot Application with JUnit and Mockito

Spring Boot Thymeleaf Real-Time Web Application - Blog App

Master Spring Data JPA with Hibernate

Spring Boot + Apache Kafka Course - The Practical Guide

Java Testing: Mastering JUnit 5 Framework

Reactive Programming in Java: Spring WebFlux and Testing

Spring Boot + RabbitMQ Course - The Practical Guide

Functional Programming in Java (Includes Java Collections)

ChatGPT for Java Developers: Boost Your Productivity with AI

Related JavaScript Programs:

Comments

Post a Comment

Spring Boot 3 Paid Course Published for Free on my Java Guides YouTube Channel

1. Using `innerHTML`

Caution with `innerHTML`:

2. Using `outerHTML`

3. Difference Between `innerHTML` and `outerHTML`

Spring Boot 3 Paid Course Published for Free
on my Java Guides YouTube Channel