jQuery text() Method

What Is text()?

.text() gets or sets plain text content (since jQuery 1.0). The getter returns the combined text of all matched elements, including descendants. The setter escapes HTML via createTextNode — tags are shown as characters, not markup. Works in both HTML and XML.

var s = $("div.demo").text()     // get combined text
$("p").text("Hello")             // set plain text
$("p").text("<b>Hi</b>")         // tags escaped — not bold

// vs html (parses markup) and val (form values):
$("p").html("<b>Hi</b>")
$("input").val("Hello")

How to Use text()

Select elements, then get combined text or set escaped text.

1. Select the element(s) whose text you need.
2. Call .text() with no args to read the combined string.
3. Call .text(value) to replace contents with escaped plain text.
4. Or pass a function (1.4+) that returns the new text per element.

* Omit arguments to get; pass text or a function to set.

Pseudocode

// Getter
parts = []
for each element in matched set:
  parts.push(all descendant text)
return parts joined as one string

// Setter
for each element in matched set:
  clear children
  append createTextNode(String(value))  // HTML escaped
return matched set

// Function setter (1.4+)
for each element (index i):
  newText = fn(i, oldText)
  set text to newText

Cheat Sheet

Keep these facts handy while reading or writing text.

Live Preview

Get or set text on a tiny demo tree and see escaping vs markup.

Ready — pick an action.

jQuery Examples

Short, copy-ready snippets. Open DevTools Console, or use Try It Yourself for a live editor.

// <div class="demo">
//   Demonstration Box
//   <ul><li>list item 1</li><li>list item 2</li></ul>
// </div>
console.log($("div.demo").text());

Demonstration Box
list item 1
list item 2

$("p").text("<b>Some new text.</b>");
// Visible as: <b>Some new text.</b>  (not bold)

<b>Some new text.</b>

var str = $("p").first().text();
$("p").last().html(str);

Test Paragraph.
Test Paragraph.

$("ul li").text(function (index) {
  return "item number " + (index + 1);
});

item number 1
item number 2
item number 3

$("#a").text("<b>Hi</b>");   // shows the tags
$("#b").html("<b>Hi</b>");   // renders bold Hi

#a text: <b>Hi</b>
#b html: Hi (bold)

Performance Notes

Setting text is usually cheaper and safer than parsing HTML. Getting text from a huge tree walks many nodes — prefer a narrower selector when possible.

Key Takeaways