jQuery | Get Content and Attributes
Get Content: In order to get the content of DOM object, there are three simple methods.jQuery methods for DOM manipulation 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 content of selected elements including HTML markup.
- val(): It is used to set or return the value of form fields.
Example: This example uses text content method to get the content.
<!DOCTYPE html><html> <head> <title>jQuery Get Content</title> <script src= </script></head> <body style="text-align:center;"> <h1 id="GFG1" style = "color:green;"> GeeksForGeeks </h1> <h2 id="GFG2">jQuery Get Content</h2> <button id="btn1">Text</button> <button id="btn2">HTML</button> <!-- Script to get the content --> <script> $(document).ready(function(){ $("#btn1").click(function(){ alert("Text: " + $("#GFG2").text()); }); $("#btn2").click(function(){ alert("HTML: " + $("#GFG1").html()); }); }); </script></body> </html> |
Output:
- Before click on the button:
- After click on the Text button:
- After click on the Html button:
Get Attributes The jQuery attr() method is used to get attribute values of DOM objects.
Example: This example uses attr() method to get the attribute value.
<!DOCTYPE html><html> <head> <title>jQuery Get Attributes</title> <script src= </script></head> <body style="text-align:center;"> <h1 style = "color:green;"> GeeksForGeeks </h1> <h2>jQuery Get Attributes</h2> <button id="btn1">Click</button> <br><br> <h3> geeksforgeeks.org </a> </h3> <!-- Script to get the attribute value --> <script> $(document).ready(function(){ $("button").click(function(){ alert($("#GFG").attr("href")); }); }); </script></body> </html> |
Output:
- Before click on the button:
- After click on the button:
Please Login to comment...