jQuery text() Method

Quiz

The text() method in jQuery is used to set or get the text content of selected elements.

When used to set the text content, it modifies or overwrites the content of the matched elements.

When we use this method to get the text content, it returns the content of the first matched element.

To manipulate both text and HTML markup of selected elements, use the html() method.

Syntax

We have different syntaxes for setting and returning the text content, we are describing them below −

Following is the syntax of text() method in jQuery to return the text content:

$(selector).text()

This is the syntax to set the text content:

$(selector).text(content)

Below is the syntax to set the text content using a function:

$(selector).text(function(index,currentcontent))

Parameters

This method accepts the following parameters −

content: A string containing the text content to set for the selected element(s).
function (index,currentcontent): A function that will be executed for each element matched by the selector.
index: The index position of the current element within the matched set of elements.
currentcontent: The current text content of the element being processed.

Example 1

In the following example, we are using the text() method to set the text content for all the paragraph elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text("Boom...text has been changed!");
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<button>Click</button>
</body>
</html>

When we execute and click the button, it sets the provided text content for all the <p> elements in DOM.

Example 2

In this example, we are returning the text content of the selected elements. In our case, the selected elements are paragraph elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      alert($("p").text());
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<button>Click</button>
</body>
</html>

After clicking the button, it returns the text content for all the <p> elements in DOM.

Example 3

Here, we are using a function to set the text content of the selected elements −

<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text(function(index){
        return "Index of this paragraph element is: " + index;
      });
    })
  });
</script>
</head>
<body>
<p>Paragraph element 1.</p>
<p>Paragraph element 2.</p>
<p>Paragraph element 3.</p>
<button>Click</button>
</body>
</html>

When we execute and click the button, it sets the provided text content for all the <p> elements in DOM and returns its index value.

jquery_ref_html.htm

Print Page