jQuery .text() Method

What You’ll Learn

The .text() method gets or sets the plain text contents of matched elements — a getter that returns combined text from all matches including descendants, and a setter that replaces all children with escaped text. This tutorial covers both forms since 1.0, the callback setter since 1.4, comparisons with .html(), .val(), and .empty(), the official jQuery demos, and five practical try-it examples.

Introduction

User names, comment bodies, notification messages, and status labels are almost always plain text — not HTML markup. jQuery provides .text() to read visible text from the page and write safe strings that never execute as scripts or render as tags.

Available since jQuery 1.0, .text() works in both HTML and XML documents (unlike .html()). Called with no arguments, it returns the combined text of every matched element and their descendants. Called with a string, number, boolean, or callback, it replaces all children with a single text node — jQuery escapes HTML automatically via createTextNode().

Do not use .text() on form inputs — use .val() instead. Use .html() only when you need to parse trusted markup. Browse the jQuery DOM hub for related manipulation methods.

Understanding the .text() Method

Getter: .text() returns a string containing the combined text contents of all matched elements, including descendant text nodes. Tags are stripped — only visible characters remain.

Setter: .text( textString ) or .text( function ) replaces every child inside each matched element with one text node. Numbers and booleans are converted to strings. HTML in the argument is escaped, not parsed. Returns the jQuery collection for chaining.

📝 Syntax

jQuery .text() supports three forms:

Get text contents — since 1.0

.text()

• Returns combined text from all matched elements and their descendants.
• Works in both HTML and XML documents.

Set text contents — since 1.0

.text( textString )

• Replaces all children inside each matched element.
• textString — plain text; also accepts Number or Boolean (converted to String).

Set with callback — since 1.4

.text( function( index, text ) {
  // return new text string; `this` is the current element
} )

• Callback receives index and old text value per matched element.

Examples Gallery

Examples 1–5 follow the official jQuery API documentation and common production patterns. Use DevTools or the Try-it links to run each snippet in the browser.

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

First p: "Test Paragraph." (bold stripped)
Last p updated via .html(str) — no red bold tags

Official jQuery text getter demo

$( "p" ).text( " Some new text with <b>bold</b> tags." );

Paragraph shows literal "<b>bold</b>" characters
Previous children replaced — not appended
Red bold styling from original content is gone



Official jQuery text setter demo

var allText = $( "div.demo-container" ).text();
// "Demonstration Box list item 1 list item 2"

$( "#output" ).text( allText );

Combined string from container + descendants
Tags stripped — only text nodes included
Whitespace may vary slightly between browsers

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

li items become "item number 1", "item number 2", ...
Callback receives index and old text value
Official jQuery 1.4 callback demo

var userComment = formData.comment; // may contain <script> or tags

$( "#comment-display" ).text( userComment );

// NEVER: $( "#comment-display" ).html( userComment );

Malicious markup shown as literal characters
No script execution — createTextNode escapes HTML
Default choice for names, messages, and labels



Pair with server-side validation for defense in depth

🚀 Common Use Cases

• User comments — display submitted text safely without XSS.
• Status labels — update counters, badges, and notification text dynamically.
• Strip HTML — getter removes tags for plain-text previews or search.
• Combined reading — extract all visible text from a widget for copy or export.
• Dynamic list labels — callback form renames items by index.
• XML documents — read and write text where .html() is unavailable.

📝 Notes

• Available since jQuery 1.0 — works in HTML and XML documents.
• Do not use on input, textarea, or select — use .val().
• Do not use on script elements — use .html() to read script source.
• Getter concatenates text from all matched elements (unlike .html() getter).
• Setter accepts Number and Boolean — converted to String automatically.
• Since jQuery 1.4, getter includes text and CDATA nodes, not just element nodes.
• Whitespace in getter results may vary slightly between browser HTML parsers.

💡 Best Practices