{"id":2167,"date":"2013-01-31T04:31:31","date_gmt":"2013-01-31T04:31:31","guid":{"rendered":"https:\/\/theextremewebdesigns.com\/blog\/?p=2167"},"modified":"2013-01-31T04:31:31","modified_gmt":"2013-01-31T04:31:31","slug":"jquery-get-div-text-get-div-text-using-div-id-div-class-examples","status":"publish","type":"post","link":"https:\/\/theextremewebdesigns.com\/blog\/jquery-get-div-text-get-div-text-using-div-id-div-class-examples\/","title":{"rendered":"Examples To Get Div Text Using Div ID \/ Div Class in jQuery"},"content":{"rendered":"<p>While working with many elements of a web page, especially divs, there might have been a time when you felt the need to get the div text using jQuery. So do you know how to get it? If not, then this article is for you. In this article, I am going to share very easy ways to use <strong>jQuery to\u00a0get div text by means of div ID and div Class name<\/strong>. Demo &amp; Examples are included, so it will be super easy &amp; fun to follow along.<!--more--><\/p>\n<h2>Examples on how to Get Div Text Using Div ID \/ Div Class Name<\/h2>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2167\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p>Simply put, the div text is nothing but the content of the div. So for the sake of the example, let us assume that we have a div in our webpage. It has an ID &#8220;my_div_id&#8221; and a class &#8220;my_div_class&#8221;. \u00a0So here&#8217;s what we are going to do. We are going to create 2 buttons. When one button is clicked, it will alert the div text by targeting the div using it&#8217;s ID. The second button will also alert the div text, but the only difference is that it will target the div using it&#8217;s class. Agreed? So let&#8217;s jump to the source code:<\/p>\n<p><strong>Source code to Get Div Text using Div ID &amp; Div Class Name in jQuery:<\/strong><\/p>\n<pre class=\"lang:xhtml decode:true crayon-selected\" title=\"Example\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;Examples on using jQuery to Get Div Text Using Div ID, Div Class&lt;\/title&gt;\n&lt;script type=\"text\/javascript\" src=\"js\/jquery-1.8.2.min.js\"&gt;&lt;\/script&gt;\n&lt;style type=\"text\/css\"&gt;\n.my_div_class {\n\tpadding: 5px;\n\tborder: 2px solid #09F;\n}\n&lt;\/style&gt;\n&lt;\/head&gt;\n\n&lt;body&gt;\n\n&lt;div id=\"my_div_id\" class=\"my_div_class\"&gt;This is some custom text in a div.&lt;\/div&gt;\n&lt;br&gt;\n\n&lt;input type=\"submit\" name=\"sbt_get_div_text_using_id\" id=\"sbt_get_div_text_using_id\" value=\"Get Div Text Using ID\"&gt;\n&lt;input type=\"submit\" name=\"sbt_get_div_text_using_class_name\" id=\"sbt_get_div_text_using_class_name\" value=\"Get Div Text Using Class Name\"&gt;\n&lt;script type=\"text\/javascript\" language=\"javascript\" &gt;\n$(document).ready(function(){\n\n\t$('#sbt_get_div_text_using_id').click(function(e){\n\n\t\talert( $('#my_div_id').text() );\n\n\t\te.preventDefault();\n\n\t});\t\t\n\n\t$('#sbt_get_div_text_using_class_name').click(function(e){\n\n\t\talert( $('.my_div_class').text() );\n\n\t\te.preventDefault();\n\n\t});\t\t\n\n});\n&lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<div class=\"make_demo\">\r\n\r\n\t<form action=\"https:\/\/theextremewebdesigns.com\/blog\/wp-content\/themes\/ewd_blog_2017\/try_demo.php?post_id=2167\" method=\"post\" name=\"form1\" target=\"_blank\" id=\"form1\">\r\n\r\n\r\n\t<input type=\"hidden\" name=\"shortcode_content\" id=\"shortcode_content\" value=\"\" \/>\r\n\r\n        <div class=\"try_demo_btn_container\">\r\n\r\n\r\n            <button type=\"submit\" name=\"sbt_make_demo\" id=\"sbt_make_demo\" class=\"btn-primary btn-try-demo\">\r\n                Try Demo\r\n            <\/button>\r\n\r\n\r\n        <\/div><!-- .try_demo_btn_container -->\r\n\r\n    <\/form>\r\n    <\/div>\r\n    \n<p><strong>Your Turn!<\/strong><\/p>\n<p>Do you know of any other ways to <strong>get div text using div id or using div class name in jQuery<\/strong>? Feel free to suggest by commenting below.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>While working with many elements of a web page, especially divs, there might have been a time when you felt the need to get the div text using jQuery. So do you know how to get it? If not, then this article is for you. In this article, I am going to share very easy [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":395,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[20,13],"tags":[42,41],"class_list":["post-2167","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-jquery-tips-and-tricks","category-tips-and-tricks","tag-jquery-demos-2","tag-jquery-tips"],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/paBnQX-yX","jetpack_sharing_enabled":true,"post_mailing_queue_ids":[],"_links":{"self":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2167","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/comments?post=2167"}],"version-history":[{"count":0,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/posts\/2167\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/"}],"wp:attachment":[{"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/media?parent=2167"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/categories?post=2167"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/theextremewebdesigns.com\/blog\/wp-json\/wp\/v2\/tags?post=2167"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}