jQuery html() Method
Last Updated :
27 Oct, 2022
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 >
$(document).ready(function() {
$("button").click(function() {
$("h2").html(function(n) {
return "jQuery | html() Method"
+ " has index: " + n;
});
});
});
</ script >
</ body >
</ html >
|
Output:
Share your thoughts in the comments
Please Login to comment...