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 to set the content --> < 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 > |
chevron_right
filter_none
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 to use set attribute method --> < script > $(document).ready(function() { $("button").click(function() { $("#GFG").attr("href", }); }); </ script > </ body > </ html > |
chevron_right
filter_none
Output:
- Before click on link:
- Click on link before click on button:
- Click on link after click on button: