jQuery text() Method

By: Rajesh P.S.

The jQuery text() method serves as a means to access or modify the textual content of HTML elements. It's particularly useful for working with elements that contain only text, such as headings, paragraphs, or spans. Here are some examples illustrating the usage of the text() method:

Getting Text Content

Consider an HTML structure with a <p> element:

<p id="myParagraph">This is a paragraph.</p>

To retrieve the text content of this paragraph using jQuery:

var paragraphText = $("#myParagraph").text(); console.log(paragraphText); // Output: "This is a paragraph."

Setting Text Content

To set or modify the text content of an element, you can use the text() method with an argument:

Continue Reading...

$("#myParagraph").text("New text for the paragraph.");

After executing this code, the content of the paragraph will change to "New text for the paragraph."

Working with Multiple Elements

When working with multiple elements, the text() method will get or set the text content of the first element in the selection. For instance:

<p class="myClass">First paragraph.</p> <p class="myClass">Second paragraph.</p>

var firstText = $(".myClass").text(); // Gets text of the first paragraph $(".myClass").text("Updated text."); // Sets text for both paragraphs

In this example, the text content of both paragraphs will be updated to "Updated text."

jQuery Set and Get Contents with text() Method Examples

Set Contents with text() Method

$("#btn").click(function(){ $("#pr").text("Paragrapg changed using text() method"); });

<p id="pr">Changing this text to...</p> <button id="btn">Set Values</button>

Get Contents with text() Method

$("#btn").click(function(){ var str = $("#pr").text(); alert(str); });

<p id="pr">Changing this text to...</p> <button id="btn">Get Values</button>

Browser View

Changing this text to...

Full Source

<html> <head> <title>jQuery text() example</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function() { $("#btnGet").click(function(){ var str = $("#pr").text(); alert(str); }); $("#btnSet").click(function(){ $("#pr").text("Paragraph changed using text() method"); }); }); </script> </head> <body> <p id="pr">Changing this text to...</p> <button id="btnGet">Get Values</button> <button id="btnSet">Set Values</button> </body> </html>

Difference between val() and text()

The val() method is versatile in that it retrieves the value of input elements regardless of their type, making it suitable for text inputs, checkboxes, radio buttons, and more. On the other hand, the text() method extracts the inner text (not HTML) from all selected elements, like paragraphs or headings. However, it's crucial to recognize that the text() method won't function as expected on input elements, as these elements don't possess inner text content like other standard HTML elements.

Conclusion

The text() method is especially suitable for handling plain text content, but it won't interpret or modify HTML tags within the content. If you need to work with HTML content, you can use the html() method instead.

Next > jQuery HTML Method

Related Topics

More Related Topics.....