Cómo cambiar texto en jQuery

Usa el método text() de jQuery para leer el texto de un elemento seleccionado o asignarle texto nuevo. Llama a .text() sin argumentos para leerlo; pasa una cadena para reemplazar el contenido de texto de los elementos seleccionados.

El método text() en jQuery

La forma de .text() sin argumentos funciona como un getter: devuelve el contenido de texto combinado de los elementos coincidentes. Por ejemplo, si la página contiene <p id="line">It's a line.</p>, entonces $('#line').text() devuelve It's a line.. Esta llamada lee el texto actual; no asigna ningún valor.

Al pasar un valor, .text(value) funciona como un setter. Actualiza el contenido de texto de todos los elementos coincidentes y devuelve la colección de jQuery, lo que permite encadenar métodos. El valor se trata como texto, por lo que los caracteres de marcado, como <strong>, se muestran como texto en lugar de interpretarse como HTML. Usa .html() solo si quieres insertar marcado y has tratado de forma segura cualquier entrada que no sea de confianza.

Usa el método text() para cambiar texto directamente con jQuery

En una página web, carga jQuery y ejecuta el setter cuando el documento esté listo. El siguiente ejemplo de Node usa una pequeña simulación de la página y de la selección de jQuery para ejecutar la misma llamada de forma aislada. Empieza con un párrafo que contiene “Text”, le asigna otro texto y muestra el valor resultante:

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

En una página real, usa el callback de documento listo con <p id="title">Text</p> y el mismo setter $('#title').text('New Text'). Cuando se ejecuta el callback, el párrafo muestra “New Text”. La simulación de Node ilustra la llamada al método; para usarlo en el navegador, la página debe cargar jQuery.

Usa el método text() para cambiar texto con eventos de clic en jQuery

Para actualizar el texto después de un clic, vincula un controlador al botón y llama a .text() dentro de él para modificar el párrafo de destino. Este ejemplo autónomo de Node representa un párrafo y un botón, y luego invoca el controlador registrado para mostrar el texto antes y después del clic:

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

En un navegador, usa el controlador con <p id="title">Text</p> y <button id="press">Text Change</button>, después de cargar jQuery y antes de ejecutar el script. Al principio, el párrafo muestra “Text”; al hacer clic en el botón, cambia a “Text Altered”. Comprueba que los ID de los selectores coincidan con los de los elementos de la página para que el controlador actualice el párrafo correcto.