How to Change Text in jQuery

Use jQuery’s text() method to read the text inside a selected element or set new text for it. Call .text() with no argument to read; pass a string to replace the selected elements’ text content.

the text() Method in jQuery

The no-argument form of .text() is a getter: it returns the combined text content of the matched elements. For example, if the page contains <p id="line">It's a line.</p>, then $('#line').text() returns It's a line.. This call reads the current text; it does not set a value.

When you pass a value, .text(value) is a setter. It updates the text content of every matched element and returns the jQuery collection, which allows method chaining. The value is treated as text, so markup characters such as <strong> are displayed as text rather than parsed as HTML. Use .html() only when you intend to set markup and have handled any untrusted input safely.

Use the text() Method to Change Text Directly Using jQuery

In a browser page, load jQuery and run the setter after the document is ready. The following Node example uses a tiny stand-in for the page and jQuery selection so the same call can run in isolation. It starts with a paragraph containing “Text,” sets its text, and prints the resulting value:

const document = {};
const elements = { '#title': { text: 'Text' } };

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#title').text('New Text');
});
console.log($('#title').text());

New Text

For a real page, use the ready callback with <p id="title">Text</p> and the same $('#title').text('New Text') setter. When the callback runs, the paragraph displays “New Text.” The Node stand-in illustrates the method call; the page itself must load jQuery for browser use.

Use the text() Method to Change Text With Click Events Using jQuery

To update text after a click, bind a handler to the button and call .text() on the target paragraph inside it. This self-contained Node example models a paragraph and button, then invokes the registered handler to show the text before and after the click:

const document = {};
const elements = {
  '#title': { text: 'Text' },
  '#press': {}
};
const handlers = {};

function $(selector) {
  if (selector === document) {
    return { ready(callback) { callback(); } };
  }
  const element = elements[selector];
  return {
    text(value) {
      if (value === undefined) return element.text;
      element.text = value;
      return this;
    },
    click(callback) {
      handlers[selector] = callback;
      return this;
    }
  };
}

$(document).ready(function() {
  $('#press').click(function() {
    $('#title').text('Text Altered');
  });
});

console.log($('#title').text());
handlers['#press']();
console.log($('#title').text());

Text
Text Altered

In a browser, use the handler with <p id="title">Text</p> and <button id="press">Text Change</button>, with jQuery loaded before the script. The paragraph initially displays “Text”; clicking the button changes it to “Text Altered.” Keep the IDs in the selectors matched to the page elements so the handler updates the intended paragraph.