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
How To Add Tooltip In React JS
How To Add Tooltip In React JS

In this article, we will see how to add a tooltip in react js. Tooltips display informative text when users hover o...

Read More

Sep-12-2022

Laravel 10 Custom Validation Error Message
Laravel 10 Custom Validation E...

In this article, we will see the laravel 10 custom validation error message. Here, we will learn about how to creat...

Read More

May-19-2023

How to Disable Right Click using jQuery
How to Disable Right Click usi...

In this small post i will show you how to disable right click using jquery. Here, we will disable right click on pa...

Read More

Aug-18-2021

Copy To Clipboard JQuery
Copy To Clipboard JQuery

In this article, we will see how to copy to clipboard jQuery. we will learn how to copy text from textarea&nbs...

Read More

Aug-19-2020