jQuery La méthode text() définir ou retourner le contenu texte des éléments sélectionnés

Définition et Usage La méthode text()

La méthode text() définit ou retourne le contenu texte des éléments sélectionnés.

Retourner le contenu du texte

Lorsque cette méthode est utilisée pour retourner une valeur, elle retourne le contenu texte combiné de tous les éléments sélectionnés (la balisage HTML est supprimé).

Syntaxe

$(selector).text()

Exemple retourner le contenu d’un élément html

Sélectionner le code


<!DOCTYPE html>
  <html>
  <head>
 <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      alert($("p").text());
    });
  });
  </script>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Donner le contenu texte de tous les éléments
  p</button>
  </body>
  </html>

Définit le contenu texte pour tous les éléments sélectionnés

Lorsque cette méthode est utilisée pour définir une valeur, il remplace tout le contenu des éléments sélectionnés.

Syntaxe

$(sélecteur).text(contenu)

Paramètre	Description
contenu	Spécifie le nouveau contenu de texte pour les éléments sélectionnés. Note : Les caractères spéciaux vont être codés

Exemple : Définit le contenu texte pour tous les éléments :

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text("Bonjour le monde!");
    });
  });
  </script>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Définit le contenu texte pour tous les éléments
  p</button>
  </body>
  </html>

Définit le contenu de texte à l'aide d'une fonction

À l'aide d'une fonction pour définir le contenu du texte de tous les éléments sélectionnés.

Syntaxe

$(sélecteur).text(function(index,oldcontent))

Paramètre	Description
function(index,oldcontent)	Spécifie une fonction qui retourne le contenu du nouveau texte pour les éléments sélectionnés. index - facultatif. Reçoit la position d'index du sélecteur oldcontent - facultatif. Reçoit le contenu actuel du sélecteur

Exemple : Définit le contenu texte pour tous les éléments avec une fonction :

Changer le texte contenu dans les élément p

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $("p").text(function(n){
      return "Cet élément p a un index: " + n;
      });
    });
  });
  </script>
  </head>
  <body>
  <p>Ceci est un paragraphe.</p>
  <p>Ceci est un autre paragraphe.</p>
  <button>Changer le texte contenu dans les élément
  p</button>
  </body>
  </html>

Exemple :

Trouver le texte dans le premier paragraphe, puis définissez le code html du dernier paragraphe.

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      var str = $("p:first").text();
      $("p:last").html(str);
    });
  });
  </script>
  <style>
    p { color:blue; margin:8px; }
    b { color:red; }
    </style>
  </head>
  <body>
  <button>Executer</button>
    <p><b>Teste</b> Paragraphe.</p>
    <p></p>
  </body>
  </html>

Exemple :

Ajouter du texte dans le paragraphe

Sélectionner le code


  <!DOCTYPE html>
  <html>
  <head>
  <script
  src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  <script>
  $(document).ready(function(){
    $("button").click(function(){
    $("p").text("<b>Voici </b> un nouveau texte.");
    });
  });
  </script>
  <style>
    p { color:blue; margin:8px; }
    </style>
  </head>
  <body>
  <button>Executer</button>
    <p>Teste Paragraphe.</p>
  </body>
  </html>

JQuery les méthodes pour manipuler HTML

Par gerywa 25 juillet 2014

jQuery La méthode text()

Référence des sélécteurs jQuery

Définition et Usage La méthode text()

Retourner le contenu du texte

Exemple retourner le contenu d’un élément html

Définit le contenu texte pour tous les éléments sélectionnés

Exemple : Définit le contenu texte pour tous les éléments :

Définit le contenu de texte à l'aide d'une fonction

Exemple : Définit le contenu texte pour tous les éléments avec une fonction :

Trouver le texte dans le premier paragraphe, puis définissez le code html du dernier paragraphe.

Ajouter du texte dans le paragraphe

La méthode secrète likes sans fin sur Facebook