How To Replace innerHTML of Div Using jQuery

Websolutionstuff | Jul-08-2022 | Categories : jQuery

In this article, we will see how to replace the innerHTML of div using jquery. We can use html() method to replace the innerHTML of the div or any other HTML element. The html() method sets or returns the content (innerHTML) of the selected elements.

So, let's see how to replace html of div using jquery, jquery replace html in div, how to add html in div using jquery, how to change div text in jquery, jquery replace innerHTML, jquery get innerHTML, jquery replace html.

The jQuery code in the following example will replace the innerHTML of a DIV element having id changeTextDiv with an HTML heading on click of the button.

<!DOCTYPE html>
<html lang="en">
<head>
<title>How To Replace innerHTML of Div Using jQuery - Websolutionstuff</title>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(document).ready(function(){
    $("#changeTextBtn").click(function(){
        $("#changeTextDiv").html("<h1>Hello, World!</h1>");
    });
});
</script>
</head>
<body>
    <div id="changeTextDiv">
        <p><b>Click the following button to replace me.</b><p>
    </div>
    <button type="button" id="changeTextBtn">Replace HTML</button>
</body>
</html>

 


You might also like:

Recommended Post
Featured Post
Laravel 10: New Features And Release Date
Laravel 10: New Features And R...

In our ever-changing digital landscape, staying ahead of the competition is essential. And that's precisely what we&...

Read More

Jan-11-2023

How to Generate QR Code in Node.js
How to Generate QR Code in Nod...

In this example we will see how to generate QR Code in Node.js application. In this example we will use qrcode npm...

Read More

Sep-20-2021

Multiple ways to Validate Email Addresses in Laravel 10
Multiple ways to Validate Emai...

Hey there! Have you ever wondered how websites ensure that the email addresses you provide are valid? In this article, I...

Read More

Mar-04-2024

Dependent Dropdown In Laravel 9 Vue JS
Dependent Dropdown In Laravel...

In this article, we will see a dependent dropdown in laravel 9 vue js. Here, we will learn how to create a dependent dro...

Read More

Dec-15-2022