jQuery Get Content

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().

Test it Live

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.

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in 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.

Test it Live

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.

Test it Live

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.

Test it Live

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.

DOWNLOAD Free jQuery CHEAT SHEET