jQuery .text() function

There are two versions of this jQuery text attribute: .text() and .text(val).

Key Takeaways

The jQuery .text() function has two versions: .text() which gets all the combined text contents of all matched elements, and .text(val) which is similar to .html() but escapes HTML.
An alternative to jQuery’s .text() function is a custom function that preserves line-breaks. This function uses the innerText property if available, otherwise it uses innerHTML while replacing “
” with “n” and removing all other HTML tags.
The jQuery .text() function can be used to get or set the text content of an element or multiple elements. It treats HTML tags as plain text and cannot be used to get or set HTML content. For appending text, the .append() method should be used instead of .text().

jQuery text() function

Syntax: .text()

Functionality: .text() gets all the combined text contents of all matched elements.

Browser Compatiablity: text() works in all browsers that we have tested on.

Basic Example:

Find the text in the first paragraph (stripping out the html), then set the html of the last paragraph to show it is just text (the red bold is gone).

jQuery text(val) function

Syntax: .text(val)

Functionality: .text(val) is similar to .html() but escapes HTML (replace “< ” and “>” with their HTML entities).

Browser Compatiablity: text(val) works in all browsers that we have tested on.

Basic Example:
Add text to the paragraph (notice the bold tag is escaped).


$("p").text("Some new text.");

Alternative to jQuery text() function

This is a jQuery function which can be used instead of jQuery’s .text() to preserves line-breaks.


(function($){
   $.fn.innerText = function(msg) {
         if (msg) {
            if (document.body.innerText) {
               for (var i in this) {
                  this[i].innerText = msg;
               }
            } else {
               for (var i in this) {
                  this[i].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
               }
            }
            return this;
         } else {
            if (document.body.innerText) {
               return this[0].innerText;
            } else {
               return this[0].innerHTML.replace(/&lt;br&gt;/gi,"n").replace(/(&lt;([^&gt;]+)&gt;)/gi, "");
            }
         }
   };
})(jQuery);

Frequently Asked Questions about jQuery Text Function

How can I use the jQuery text function to get the text content of an element?

The jQuery text function is a powerful tool that allows you to get the text content of an element. To do this, you simply need to select the element using jQuery selectors and then call the .text() method. For example, if you want to get the text content of a paragraph with the id “myPara”, you would use the following code:

var text = $("#myPara").text();

In this code, $(“#myPara”) is the jQuery selector that selects the paragraph, and .text() is the method that gets the text content. The text content is then stored in the variable “text”.

Can I use the jQuery text function to set the text content of an element?

Yes, you can use the jQuery text function to set the text content of an element. To do this, you need to pass the new text content as a parameter to the .text() method. For example, if you want to set the text content of a paragraph with the id “myPara” to “Hello, World!”, you would use the following code:

$("#myPara").text("Hello, World!");

In this code, $(“#myPara”) is the jQuery selector that selects the paragraph, and .text(“Hello, World!”) is the method that sets the text content.

What happens if I use the jQuery text function on multiple elements?

If you use the jQuery text function to get the text content of multiple elements, it will return the combined text content of all the selected elements. For example, if you have two paragraphs with the class “myClass” and you want to get their text content, you would use the following code:

var text = $(".myClass").text();

In this code, $(“.myClass”) is the jQuery selector that selects the paragraphs, and .text() is the method that gets the text content. The combined text content of the paragraphs is then stored in the variable “text”.

If you use the jQuery text function to set the text content of multiple elements, it will set the text content of all the selected elements to the specified text. For example, if you want to set the text content of all paragraphs with the class “myClass” to “Hello, World!”, you would use the following code:

$(".myClass").text("Hello, World!");

In this code, $(“.myClass”) is the jQuery selector that selects the paragraphs, and .text(“Hello, World!”) is the method that sets the text content.

Can I use the jQuery text function to get or set HTML content?

No, the jQuery text function cannot be used to get or set HTML content. The .text() method will treat any HTML tags as plain text. If you want to get or set HTML content, you should use the .html() method instead.

What is the difference between the jQuery text function and the jQuery html function?

The main difference between the jQuery text function and the jQuery html function is how they handle HTML tags. The .text() method treats any HTML tags as plain text, while the .html() method treats them as HTML. This means that if you use the .text() method to get the content of an element, it will return the text content without any HTML tags. If you use the .html() method, it will return the HTML content, including any HTML tags.

Can I use the jQuery text function with other jQuery methods?

Yes, you can use the jQuery text function with other jQuery methods. For example, you can use the .text() method with the .css() method to change the text content and the style of an element at the same time. Here is an example:

$("#myPara").text("Hello, World!").css("color", "red");

In this code, $(“#myPara”) is the jQuery selector that selects the paragraph, .text(“Hello, World!”) is the method that sets the text content, and .css(“color”, “red”) is the method that changes the color of the text to red.

How can I use the jQuery text function to append text to an element?

If you want to append text to an element using jQuery, you should use the .append() method instead of the .text() method. The .text() method will replace the existing text content with the new text, while the .append() method will add the new text to the end of the existing text content. Here is an example:

$("#myPara").append(" Hello, World!");

In this code, $(“#myPara”) is the jQuery selector that selects the paragraph, and .append(” Hello, World!”) is the method that appends the text ” Hello, World!” to the end of the existing text content.

Can I use the jQuery text function to remove text from an element?

If you want to remove all text from an element using jQuery, you can use the .text() method and pass an empty string as the parameter. This will replace the existing text content with an empty string, effectively removing the text. Here is an example:

$("#myPara").text("");

In this code, $(“#myPara”) is the jQuery selector that selects the paragraph, and .text(“”) is the method that removes the text.

If you want to remove specific text from an element, you will need to use the .replaceWith() method or the .html() method with a function that replaces the specific text with an empty string.

What is the return type of the jQuery text function?

The return type of the jQuery text function depends on how it is used. If it is used to get the text content of an element, it will return a string containing the text content. If it is used to set the text content of an element, it will return the jQuery object, allowing for method chaining.

Can I use the jQuery text function with non-text elements?

Yes, you can use the jQuery text function with non-text elements. If you use the .text() method to get the text content of a non-text element, it will return the text content of any text nodes within the element. If you use the .text() method to set the text content of a non-text element, it will replace any text nodes within the element with the new text.