jQuery | html() Method - GeeksforGeeks

19 Feb, 2019
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()
$(selector).html()
It sets the content of matched element.$(selector).html(content)
$(selector).html(content)
It sets the content using function.$(selector).html(function(index, currentcontent))
$(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.
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.
<!DOCTYPE html><html>  <head>     <title>        jQuery html() Method    </title>            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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 element.
<!DOCTYPE html><html>  <head>     <title>        jQuery html() Method    </title>            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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.
<!DOCTYPE html><html>  <head>     <title>        jQuery html() Method    </title>            <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">    </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:
jQuery-HTML/CSS
Picked
JQuery
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
JQuery | Set the value of an input text field
Form validation using jQuery
How to change selected value of a drop-down list using jQuery?
How to change the background color after clicking the button in JavaScript ?
How to fetch data from JSON file and display in HTML table using jQuery ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?