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

In this tutorial, we will see how to disable specific dates in jquery datepicker. The jQuery UI Datepicker is...

Read More

Jun-16-2022

How To Get Multiple Checkbox Value In Javascript
How To Get Multiple Checkbox V...

In this article, we will see how to get multiple checkbox values in javascript. Here, we will learn to get the sele...

Read More

Jan-10-2023

CRUD Operation In PHP
CRUD Operation In PHP

In this tutorial, I will show you how to create a CRUD operation with login-logout in PHP. So, if you are a newcomer in...

Read More

Jul-20-2020

How To Use Sweetalert2 In Laravel
How To Use Sweetalert2 In Lara...

Today we will learn how to use sweetalert2 In laravel, You can use sweetalert2 in laravel as well as php, ...

Read More

May-03-2021