Jquery get content methods like text(), html(), val() and attr() can be used to get the content of the HTML element. These methods when calls for getter method of jquery, contain no argument inside the function.
Below is the explanation of jQuery get content with simply a useful examples.
jQuery Get Text Content Using text()
You can get the inner text content of the HTML element using the jQuery text() method. If the element again contains the HTML tags inside it, the function gets and display only the text content, not the tag name. If you want to get the inner text as well as the HTML tags, you can use html().
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $("#btn-txt").click(function(){ var ptext = $("#my-para").text(); alert(ptext); }); }); </script> <button type="button" id="btn-txt">Get Text Content</button> <p id="my-para">This is a paragraph to Show jQuery text method.</p> |
Output
This is a paragraph to Show jQuery text method.
The example contains the paragraph with a strong tag inside it to make text bold. When you click on the button, an alert message appears, which contains only the text and not the strong tag. This is the jQuery get content method to get the text of the content using the jquery.
jQuery Get HTML Content Using html()
If you want to get the inner content of the HTML element with tag names, you have to use the jQuery html() method. The function is the jQuery get content function used to get the HTML content.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $("#btn-html").click(function(){ var phtml = $("#my-parahtml").html(); alert(phtml); }); }); </script> <button type="button" id="btn-html">Get HTML content</button> <p id="my-parahtml"><span>This is a paragraph to get content <em>using jQuery HTML method</em></span></p> |
Output
This is a paragraph to get content using jQuery HTML method
The above example gives the HTML content with the HTML tags on alert. Click the button given to get the content using jQuery.
How to Get Value Using val()
You can get the inner value of the content of the HTML element using the jQuery val() method. You can get the value of the any input type, select type and other HTML elements. This can be useful if you want to access and use the value of the HTML element.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<script> $(document).ready(function(){ $("#btn-val").click(function(){ var pval = $("#my-inputval").val(); alert(pval); }); }); </script> <p>Select your option from the selectbox given below and click the button.</p> <button type="button" id="btn-val">Click me to Get Value</button> <select id="my-inputval"> <option value="">Select your option</option> <option>Mahendra Dhoni</option> <option>Virat Kohli</option> <option>Rohit Sharma</option> </select> |
Output
Select your option from the selectbox given below and click the button.
Get Attribute Using jQuery attr() Method
If you want to perform some event but access an HTML element with its attribute, you can do so with jQuery attr(). Suppose you have an anchor tag and you want to get the href attribute of it. You have to pass attribute as an argument of the attr() which you want to get.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script> $(document).ready(function(){ $("#btn-attr").click(function(){ var pattr = $("#myanchor").attr("href"); alert(pattr); }); }); </script> <a href="https://tutorialdeep.com/jquery/jquery-animation-effect-animate/" target="_blank" id="myanchor" rel="noopener noreferrer">jQuery Animation Effect</a><br><br> <button type="button" id="btn-attr">Click me to Get Attribute</button> <p>When you click the button, you will get the value of href attribute of anchor element.</p> |
Output
jQuery Animation Effect
When you click the button, you will get the value of href attribute of anchor element.
The above example gives the href attribute of the anchor tag in the alert. Click the above button the get the attribute value.