jQuery html() Method
Last Updated :
27 Oct, 2022
Improve
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:
