Open In App

jQuery html() Method

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

The html() Method in jQuery is used to set or return the innerHTML content of the selected element. 

Syntax:

  • It returns the content of the first matched element.
$(selector).html()
  • It sets the content of the matched element.
$(selector).html(content)
  • It sets the content using a function.
$(selector).html(function(index, currentcontent))

Parameters: This method accepts two parameters as mentioned above and described below:

  • content: It is a mandatory parameter that specifies the new content for the selected elements.
  • function(index, currentcontent): It is an optional parameter that specifies a function that returns the new content for the selected element.
    • index: It is used to return the index position of the element in the set.
    • currentcontent: It is used to return the current HTML content of the selected element.

Example 1: This example sets the content to the element. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery html() Method
    </title>
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>
        Fade-in effect<br>
        jQuery | html() Method
    </h2>
    <button>Click</button>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("h2").html("Hello <b>GEEKS!</b>");
            });
        });
    </script>
</body>
 
</html>


Output:

 

Example 2: This example returns the first match of the element. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery html() Method
    </title>
    <script src=
    </script>
</head>
 
<body style="text-align:center;">
    <h1 style="color:green;">
        GeeksForGeeks
    </h1>
    <h2>
        jQuery | html() Method
    </h2>
    <button>Click</button>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert($("h2").html());
            });
        });
    </script>
</body>
 
</html>


Output:

 

Example 3: This example set the content using function. 

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery html() Method
    </title>
    <script src=
    </script>
</head>
     
<body style = "text-align:center;">
    <h1 style = "color:green;" >
        GeeksForGeeks
    </h1>
    <h2>
        jQuery | html() Method
    </h2>
    <button>Click</button>
     
    <!-- Script to set the content -->
    <script>
        $(document).ready(function() {
            $("button").click(function() {
                $("h2").html(function(n) {
                    return "jQuery | html() Method"
                            + " has index: " + n;
                });
            });
        });
    </script>
</body>
</html>


Output:

 



Last Updated : 27 Oct, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads