oujood.com

jQuery La méthode text()

Lorsque la méthode text() est utilisée pour retourner une valeur, elle retourne le contenu texte combiné de tous les éléments sélectionnés
Définir ou retourner le contenu texte des éléments sélectionnés

chercher |

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

Exemple :    📝  Copier 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 :

Exemple :    📝  Copier 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

Exemple :    📝  Copier 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.

Exemple :    📝  Copier 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

Exemple :    📝  Copier 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>



Par gerywa 25 juillet 2014

Voir aussi nos tutoriel :

Balise ul

Définit une liste non ordonnée

Comment on utilise XML

Comment on utilise XML

Les boucles de js

Les boucles de js