Comment modifier le texte dans jQuery

Utilisez la méthode text() de jQuery pour lire le texte d’un élément sélectionné ou lui attribuer un nouveau texte. Appelez .text() sans argument pour lire le texte ; passez une chaîne pour remplacer le contenu textuel des éléments sélectionnés.

la méthode text() dans jQuery

Sans argument, .text() sert de getter : la méthode renvoie le contenu textuel combiné des éléments sélectionnés. Par exemple, si la page contient <p id="line">It's a line.</p>, alors $('#line').text() renvoie It's a line.. Cet appel lit le texte actuel ; il ne définit aucune valeur.

Lorsque vous passez une valeur, .text(value) sert de setter. La méthode met à jour le contenu textuel de chaque élément sélectionné et renvoie la collection jQuery, ce qui permet d’enchaîner les méthodes. La valeur est traitée comme du texte : les caractères de balisage tels que <strong> s’affichent comme du texte au lieu d’être interprétés comme du HTML. Utilisez .html() uniquement si vous souhaitez définir du balisage et que vous avez traité de manière sûre toute donnée non fiable.

Utilisez la méthode text() pour modifier directement le texte avec jQuery

Dans une page Web, chargez jQuery et appelez le setter une fois le document prêt. L’exemple Node suivant utilise un petit simulacre de page et de sélection jQuery afin d’exécuter le même appel de façon isolée. Il commence par un paragraphe contenant « Text », définit son texte, puis affiche la valeur obtenue :

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

Pour une vraie page, utilisez le callback de préparation du document avec <p id="title">Text</p> et le même setter $('#title').text('New Text'). Lorsque le callback s’exécute, le paragraphe affiche « New Text ». Le simulacre Node illustre l’appel de la méthode ; pour l’utiliser dans le navigateur, la page doit charger jQuery.

Utilisez la méthode text() pour modifier le texte avec des événements de clic dans jQuery

Pour mettre à jour le texte après un clic, associez un gestionnaire au bouton et appelez .text() sur le paragraphe cible depuis ce gestionnaire. Cet exemple Node autonome modélise un paragraphe et un bouton, puis appelle le gestionnaire enregistré pour montrer le texte avant et après le 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

Dans un navigateur, utilisez le gestionnaire avec <p id="title">Text</p> et <button id="press">Text Change</button>, après avoir chargé jQuery et avant d’exécuter le script. Le paragraphe affiche d’abord « Text » ; un clic sur le bouton le remplace par « Text Altered ». Vérifiez que les identifiants des sélecteurs correspondent à ceux des éléments de la page pour que le gestionnaire mette à jour le paragraphe voulu.