Méthode html
La méthode html permet de modifier le texte
d'un élément et d'obtenir son texte avec les balises.
Syntaxe
Obtention du texte :
$(sélecteur).html();
Modification du texte :
$(sélecteur).html(nouveau texte);
Informations complémentaires
La méthode html peut appliquer une fonction
donnée à chaque élément de la sélection.
Le premier paramètre de la fonction recevra
l'index de l'élément dans la sélection, et le deuxième paramètre
- le texte actuel de l'élément :
$(sélecteur).html(function(index dans la sélection, texte actuel de l'élément));
Les noms des variables dans la fonction peuvent être quelconques.
Par exemple, si pour le premier paramètre nous donnons le nom
index - alors à l'intérieur de notre fonction sera accessible
la variable index, qui contiendra l'index dans
la sélection pour l'élément que la fonction traite
à ce moment précis. De même, si pour le deuxième
paramètre nous donnons, par exemple, le nom value - alors
à l'intérieur de notre fonction sera accessible la variable value,
qui contiendra le texte de l'élément que la fonction
traite à ce moment précis :
$(sélecteur).html(function(index, value) {
// les variables index et value sont accessibles ici
});
Le texte de chaque élément sera remplacé par celui que la fonction retourne spécifiquement pour cet élément.
Exemple
Affichons le contenu de notre paragraphe :
<p id="test">text</p>
let text = $('#test').html();
alert(text);
Exemple
Modifions le contenu de notre paragraphe :
<p id="test">text1</p>
$('#test').html('text2');
Le code HTML deviendra :
<p id="test">text2</p>
Exemple
Modifions le contenu de notre paragraphe par un texte avec des balises :
<p id="test">text1</p>
$('#test').html('<span>text2</span>');
Le code HTML deviendra :
<p id="test"><span>text2</span></p>
Exemple
Ajoutons à la fin de chaque paragraphe son numéro d'ordre dans la sélection :
<p>text</p>
<p>text</p>
<p>text</p>
$('p').html(function(index, value){
return value + ' ' + index;
});
Le code HTML deviendra :
<p>text 0</p>
<p>text 1</p>
<p>text 2</p>
Voir aussi
-
la méthode
text,
qui permet d'obtenir le texte de l'élément sans les balises -
La propriété JavaScript
innerHTML,
avec laquelle on peut changer le texte d'un élément en JavaScript natif -
La propriété JavaScript
outerHTML,
avec laquelle on peut modifier le texte d'un élément avec sa balise en JavaScript natif
