BeginnersBook

  • Home
  • Java
    • Java OOPs
    • Java Collections
    • Java Examples
  • C
    • C Examples
  • C++
    • C++ Examples
  • DBMS
  • Computer Network
  • Python
    • Python Examples
  • More…
    • jQuery
    • Kotlin
    • WordPress
    • SEO
    • JSON
    • JSP
    • JSTL
    • Servlet
    • MongoDB
    • XML
    • Perl

jQuery text()

By Chaitanya Singh | Filed Under: jQuery

The jQuery text() method is used to set or return the text content of selected elements. This is different from the jQuery html() method that we discussed in earlier. The jQuery html() method sets or returns content of selected elements with html tags while text() method returns or sets content without the html tags (just plain text).

When text() is used for returning content: When this method is used for returning content, you need not to pass anything to the method. For example, returning the text of all paragraphs can be done like this:

$("p").text();

Note: If there are multiple elements selected by the selector, then text() method returns the combined text content of all the elements in the same order in which they appeared on the page.

For example, if there are multiple paragraphs on a page and you use $(“p”).text(); then it will return text content of all the paragraphs combined (text of paragraph 1 + text of paragraph 2 + so on). We will see this in action in the following examples.

Syntax:

$(selector).text()

When text() is used for setting content of elements: When this method is used for setting the content, you need to pass the text inside the text() method like this:

$("p").text("Hi BeginnersBook.com Readers!");

This method overwrites content of all the matched elements with the content that is passed in the method as a parameter. For example, $(“p”).text(“Hi BeginnersBook.com Readers!”); will overwrite the content of all paragraphs with the message “Hi BeginnersBook.com Readers!”.

Syntax:

$(selector).text(content)

Example 1: jQuery text() method – Return text content

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("p").text());
  });
});
</script>
</head>
<body>
<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This example is shared on <b>BeginnersBook.com</b></p>

<button>Return the text content of all paragraphs</button>
</body>
</html>

Output:
Before button click:
jQuery text()
After button click: As you can see the bold content of third paragraph doesn’t appear bold in returned content, this is because the text() doesn’t return html tags along with the content. If we would have used html() method here, the bold content of third paragraph would have returned bold.
jQuery text()

Example 2: jQuery text() method – Set text content

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").text("Welcome to BeginnersBook.com!");
  });
});
</script>
</head>
<body>

<p>This is the first paragraph.</p>
<p>This is the second paragraph.</p>
<p>This is the last paragraph.</p>
<button>Set text content for all paragraphs</button>

</body>
</html>

Output:
Before “set content” button click:
jQuery text() Method
After “set content” button click:
jQuery text() Method

❮ jQuery attr()

jQuery Tutorial

  • jQuery Tutorial
  • jQuery Selectors
  • jQuery Events

jQuery Effects

  • jQuery Show & Hide
  • jQuery Fading
  • jQuery Sliding
  • jQuery Animate
  • jQuery stop()
  • jQuery Callback Function
  • jQuery Chaining

jQuery HTML/CSS

  • jQuery html()
  • jQuery addClass()
  • jQuery hasClass()
  • jQuery removeClass()
  • jQuery toggleClass()
  • jQuery after()
  • jQuery before()
  • jQuery append()
  • jQuery appendTo()
  • jQuery clone()
  • jQuery insertBefore()
  • jQuery insertAfter()
  • jQuery attr()
  • jQuery text()
  • jQuery val()
  • jQuery css()
  • jQuery prepend()
  • jQuery remove()
  • jQuery empty()
  • jQuery detach()

Copyright © 2012 – 2022 BeginnersBook . Privacy Policy . Sitemap