Open In App

jQuery text() Method

Last Updated : 10 Jul, 2023
Improve
Improve
Like Article
Like
Save
Share
Report

This method is used to set or return the text content of the element. While setting the content, it overwrites the content of all the matched elements. The returned content of text method() is used to return the text content of all matched elements.

Syntax:

Return text syntax:

$(selector).text()

Set text syntax:

$(selector).text(content)

Set text using a function:

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

Property Values:

  • Content Required: It is used to set the new text content for the element.
  • Function(index, currentcontent): It is used to specify a function that will return the new text content for the selected elements.
    • index: It returns the index position of the element.
    • currentcontent: It returns the current content of element.

Example-1: Set text syntax.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        jQuery text() Method
    </title>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").text("Jquery_text_method");
            });
        });
    </script>
</head>
 
<body>
    <h1>Geeks</h1>
    <button onclick="function()">
        Click me
    </button>
    <p>GeeksforGeeks</p>
    <p>Jquery</p>
 
</body>
 
</html>


Output:

jquery-36

Example 2: Return text syntax.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                alert($("p").text());
            });
        });
    </script>
</head>
 
<body>
    <center>
        <h1>
            Geeks
        </h1>
        <button onclick="function()">
            Click me
        </button>
 
        <p>GeeksforGeeks</p>
        <p>Jquery</p>
 
    </center>
 
</body>
 
</html>


Output:

jquery-37

Example 3: Set text using a function.

html




<!DOCTYPE html>
<html>
 
<head>
    <script src=
    </script>
 
    <script>
        $(document).ready(function () {
            $("button").click(function () {
                $("p").text(function (n) {
                    return "Index No. of Element: " + n;
                });
            });
        });
    </script>
 
</head>
 
<body>
    <h1 style="color: green;">
        GeeksforGeeks
    </h1>
    <button onclick="function()">
        Click me
    </button>
 
    <p>GeeksforGeeks</p>
    <p>Jquery_textmethod()</p>
 
</body>
 
</html>


Output:

jquery-38



Previous Article
Next Article

Similar Reads

Difference between text() and html() method in jQuery
Text() Method: This method returns the text content of the selected elements. It overwrites the content of all the matches element while setting the content. Syntax: To return text content:$(selector).text()To set text content:$(selector).text(content)To set the text content using a function:$(selector).text(function(index, currentcontent)) html()
2 min read
How to select all text in HTML text input when clicked using JavaScript?
This example shows how to select entire input in a single click using javaScript. Syntax: &lt;input onClick="this.select();" &gt; or document.getElementById("ID").select(); Example-1: Using "this.select()". &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt; Select all text in HTML text input when clicked &lt;/title&gt; &lt;/head&gt; &lt;
1 min read
How to create long shadow of text without using text-shadow in HTML and CSS ?
Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi
2 min read
How to embed text and text boxes in New Google Sites ?
Adding text and giving style to them is the most important thing to make a good website. Texts are the face of the website, good content displays the richness of the website. To add texts and edit them in Google Sites follow the steps mentioned below: Go to the insert panel present on the right side of the editing page and select the Text Box optio
1 min read
How to replace a text in a string with another text using PHP ?
A string is a sequence of one or more characters. A string is composed of characters, each of which can be replaced easily in the script. A large number of in-built PHP methods can be used to perform string replacements. Approach 1: Using str_replace() method - The str_replace() method is used to replace a text in the string with another string. Ho
3 min read
How to get text inside Text component onPress in ReactJS ?
In this article, we will learn "How to get the text inside Text component onPress in ReactJS?". Problem Statement: Sometimes in an application, it is required to get the text inside certain components, in order to reuse the components again &amp; again just by changing the text value. Approach: We will set the property inside the component's tag to
4 min read
How to place cursor position at end of text in text input field using JavaScript ?
In this article, we are going to learn about how to place the cursor at the end of the text in a text input element using JavaScript.  At first, we are going to create a text input box where some value will be given and a button to place the cursor at the end. We can place the cursor at the end of the text in a text input element by using different
2 min read
How Create a Text Box Where User Can't Type Inside the Text Box ?
To create a text box where the user can't type inside the text box, we have different approaches. In this article, we are going to learn how to create a text box where the user can't type inside the text box in JavaScript. Below are the approaches to creating a text box where the user can't type inside the text box: Table of Content Using Readonly
3 min read
Text Animation with changing the color of the text using HTML and CSS
Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this
2 min read
How to Style the Text using text-decoration Property in CSS ?
The text-decoration property in CSS is used to style the decoration of text, such as underlining, overlining, line-through, and blink effects. It is a versatile property that can enhance the visual appearance of text. Syntax/* Example of using the text-decoration property */ .element { text-decoration: [value]; }The text-decoration Property ValuesT
1 min read