jQuery | Set Content and Attributes
Set Content: It is used to set the content using jQuery. The following methods are used to set the content which are listed below:
- text(): It is used to set or return the text content of selected elements.
- html(): It is used to set or return the innerHTML content of the selected element.
- val(): This parameter is used to set or return the value of attribute for the selected elements. This method apply on the HTML form elements.
Example: This example uses set content method (text(), html() and val() method) to set the content.
<!DOCTYPE html>
< html >
< head >
< title >jQuery Set Content</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 id = "GFG1" style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 id = "GFG2" >jQuery Set Content</ h2 >
< p >Full Form: < input type = "text" id = "GFG3" value = "GFG" ></ p >
< button id = "btn1" >Set 1 line</ button >
< button id = "btn2" >Set 2 line</ button >
< button id = "btn3" >Set 3 line</ button >
< script >
$(document).ready(function() {
$("#btn1").click(function() {
$("#GFG1").text("GEEKSFORGEEKS");
});
$("#btn2").click(function() {
$("#GFG2").html("< b >Set Content</ b >");
});
$("#btn3").click(function() {
$("#GFG3").val("GeeksForGeeks");
});
});
</ script >
</ body >
</ html >
|
Output:
- Before Click on the button:
- After Click on the Set 1 line button:
- After Click on Set 2 line button:
- After Click on Set 3 line button:
Set Attributes: The jQuery attr() method in jQuery is used to set and change attribute values.
Example: This example uses attr() method to set and change attribute values.
<!DOCTYPE html>
< html >
< head >
< title >jQuery Set Attributes</ title >
< script src =
</ script >
</ head >
< body style = "text-align:center;" >
< h1 style = "color:green;" >
GeeksForGeeks
</ h1 >
< h2 >jQuery Set Attributes</ h2 >
< button id = "btn1" >Click</ button >
< br >< br >
< h3 >
geeksforgeeks.org
</ a >
</ h3 >
< script >
$(document).ready(function() {
$("button").click(function() {
$("#GFG").attr("href",
});
});
</ script >
</ body >
</ html >
|
Output:
- Before click on link:
- Click on link before click on button:
- Click on link after click on button:
Last Updated :
22 Feb, 2019
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...