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 Disable Dates After Week In jQuery Datepicker
How To Disable Dates After Wee...

In this tutorial, we will see how to disable dates after a week in jquery datepicker. In the date picker, we can di...

Read More

Jun-29-2022

How To Count Working Days In Laravel 9
How To Count Working Days In L...

In this article, we will see how to count working days in laravel 9. Here, we will learn to calculate working days...

Read More

Jan-23-2023

How to Install PHP Soap Extension in Ubuntu 23.04
How to Install PHP Soap Extens...

Hey fellow developers! Today, let's tackle the installation of the PHP SOAP extension on our Ubuntu 23.04 systems. I...

Read More

Jan-31-2024

Laravel 9 CRUD Operation Example
Laravel 9 CRUD Operation Examp...

As we know Laravel 9 was officially released yesterday with many new functionalities like Symfony 6.0 components, Symfon...

Read More

Feb-10-2022