What Is The Use Of Html Method In JQuery With Example

Posted By Bajarangi soft , Posted On 16-10-2020

In JQuery To get or set html element for a selected element we use html() method. It is an inbuilt method of jQuery. So today we discuss how to use it

What Is The Use Of Html Method In JQuery With Example

Step 1:Create index.html file and implement below code.

<button id="set_button" class="btn btn-info">Set the content</button>
<br><br>
<div id="div1" style="width:500px;height:200px;background-color:lightblue;">html() method jQuery</div><br>
<button id="get_button"  class="btn btn-info">Get the content</button>

Step 2:Implement jQuery to html() methods.

<script>
    $(document).ready(function(){
        $("#set_button").click(function(){
            $("#div1").html("<h2>Hi Friends ......I Set in this div element.</h2>");
        });
        $("#get_button").click(function(){
            var data=$("#div1").html();
            alert(data);
        });
    });
</script>

Complete Code For Using html() Method In JQuery

<!DOCTYPE html>
<html>
<head>
    <title>What Is The Use Of Html Method In JQuery With Example</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<style>
    body {
        background: black;
    }

</style>
<body>
<div class="container">
    <br><br><br><br>
    <div class="text-center">
        <h1 id="color" style="color: White;">Html() Method In JQuery</h1>
    </div>
    <br>

    <div class="well">
        <button id="set_button" class="btn btn-info">Set the content</button>
        <br><br>
        <div id="div1" style="width:500px;height:200px;background-color:lightblue;">html() method jQuery</div>
        <br>
        <button id="get_button" class="btn btn-info">Get the content</button>
    </div>

</div>
</body>
</html>
<script>
    $(document).ready(function () {
        $("#set_button").click(function () {
            $("#div1").html("<h2>Hi Friends ......I Set in this div element.</h2>");
        });
        $("#get_button").click(function () {
            var data = $("#div1").html();
            alert(data);
        });
    });
</script>

Related Post