Définit une liste non ordonnée
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
La méthode text() définit ou retourne le contenu texte des éléments sélectionnés.
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 : 📝 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>
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 : 📝 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>
À 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.
|
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 :
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 :
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>