How to Get Div Text Content and HTML Content with jQuery

Last Updated on June 5, 2021 by Roshan Parihar

In this tutorial, learn how to get div text content and HTML content using jQuery. The short answer is to use the jQuery text() to get the text content and html() to get the HTML content.

You also need to get the click event of the button using jQuery click(). Let’s find out with the examples given here.

Method 1: Using text() to Get Div Text Content in jQuery

To get the text content of the div element on button click, you have to use the text() of jQuery. The below script contains the jQuery click event to find the click of the button and execute the script code under the click event. Also, it contains the alert message box to show the resulted text content in the alert message box.

Output

This is the div to show example of div content.


The above example contains a div that contains the text and the HTML strong tag. If you want to get the text content only, you have to use the text() function of jQuery.

However, if you want to get the HTML content, keep reading the next section of this tutorial given below.

Bonus: download a Free jQuery cheat sheet that will show you 20+ most important examples to learn in jQuery.

Method 2: Using html() to Find HTML in jQuery

When you want to find the HTML content of the div element, you have to use the html() function of jQuery. If there is any HTML tag present inside the <div> element, the function finds it and displays the tag in the alert message box.

Output

This is the div to show example of div content.


Click the above button to get the HTML content of the div element. You will get an alert message box that contains the HTML tag also.

DOWNLOAD Free jQuery CHEAT SHEET

You May Also Like to Read