How to get the text inside an element using jQuery

Topic: JavaScript / jQuery« Prev|Next »

Answer: Use the jQuery text() method

You can use the jQuery text() method to get the all text content inside the element. The text() method also return the text content of child elements.

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="UTF-8">
  • <title>jQuery Get Text Content of an Element</title>
  • <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  • <script type="text/javascript">
  • $(document).ready(function(){
  •     // Show text content of plain paragraph
  •     $(".show-plain-text").click(function(){
  •         alert($(".plain").text());
  •     });
  •     
  •     // Show text content of formatted paragraph
  •     $(".show-formatted-text").click(function(){
  •         alert($(".formatted").text());
  •     });
  • });
  • </script>
  • </head> 
  • <body>
  •     <p class="plain">The quick brown fox jumps over the lazy dog.</p>
  •     <p class="formatted">The <strong>quick</strong> brown fox <em><sup>jumps</sup></em> over the <a href="#">lazy dog</a>.</p>
  •     <button type="button" class="show-plain-text">Get Plain Text</button>
  •     <button type="button" class="show-formatted-text">Get Formatted Text</button>
  • </body>
  • </html>

In the example above, if you try to get the text content of both the pain and formatted paragraph it will produce the same result.


Related FAQ

Here are some more FAQ related to this topic:

 
Close

Your Feedback:

 

We would love to hear from you! Please say something.