jQuery text() Method

jQuery | text() Method: Learn about the jQuery text() Method with its usages, syntax, and examples.
Submitted by Pratishtha Saxena, on September 26, 2022

text() Method

This is an inbuilt method of jQuery that helps to get or set the text content of the selected element. The element is specified by using the selector and following it the text() method is executed. This method just helps to access the text content of the element and not the HTML content. Therefore, if there is any kind of other HTML tag present within that element, this method does not return that tag. Hence, unlike the html() method of jQuery, this method only returns or sets the text content on the page.

text() Method Syntax

$(selector).text();
$(selector).text(content);

This method is similar to the html() method syntax-wise. If the content is specified within the method, then it sets the element with the specified content. But if no content is given, then it returns the already present content in the element.

The below example shows the implementation of the text() method. When the button is clicked, it returns the content in form of an alert. Afterward, it replaces the old content with the new one provided.

jQuery text() Method Example 1

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Text</h2>
    <p>Click the following button to get the div content in.</p>
    <button>Click Here</button>
    <hr>
    <div>Welcome to Include Help !!!</div>
    <hr>
  </body>
  
  <script type="text/javascript">
    // Method 1
    $(document).ready(function(){
        $('button').click(function(){
            var content = $('div').text();
            $(alert(content));
        })
    });
  </script>
</html>

Output:

jQuery text() Method Example 2

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <title>Document</title>
  </head>
  
  <body>
    <h2>jQuery - Text</h2>
    <p>Click the following button to get the div content in.</p>
    <button>Click Here</button>
    <hr>
    <div>Welcome to Include Help !!!</div>
    <hr>
  </body>
  
  <script type="text/javascript">
    // Method 2
    $(document).ready(function() {
      $('button').click(function() {
        $('div').text('Thanks for visiting Include Help !!!');
      })
    });
  </script>
</html>

Output:

After clicking on "Click Here" Button

jQuery val() Method

jQuery css() Method

Comments and Discussions!

Load comments ↻