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.
<!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 element.
<!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.
<!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:
