jQuery | html() Method

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

Syntax:

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

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



  • content: It is mandatory parameter which specifies the new content for the selected elements.
  • function(index, currentcontent): It is an optional parameter which 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.

Below examples illustrate the html() method in jQuery:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:

Example 3: This example set the content using function.

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>

chevron_right


Output:



My Personal Notes arrow_drop_up

Small things always make you to think big

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.