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.
|
1 2 3 4 5 6 7 8 9 10 |
<script> $(document).ready(function(){ $('#mybtntext').click(function(){ var mytext = $('.Divtext').text(); alert(mytext); }); }); </script> <div class="Divtext">This is the div to show <strong>example of div content</strong>.</div> <button type="button" id="mybtntext" class="btn btn-primary">Get Text Content</button> |
Output
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.
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.
|
1 2 3 4 5 6 7 8 9 10 |
<script> jQuery(document).ready(function(){ jQuery('#mybtnhtml').click(function(){ var myhtml = jQuery('.Divhtml').html(); alert(myhtml); }); }); </script> <div class="Divhtml">This is the div to show <strong>example of div content</strong>.</div> <button type="button" id="mybtnhtml" class="btn btn-primary">Get HTML Content</button> |
Output
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