Méthode append
La méthode append ajoute du texte à la fin
d'un élément. Il existe également la méthode
appendTo,
qui fonctionne de manière similaire.
Syntaxe
Insérer du texte à la fin d'un élément :
$(sélecteur).append(texte);
À la fin des éléments sélectionnés, on peut ajouter du texte qui sera retourné par une fonction personnalisée. La fonction est appelée séparément pour chacun des éléments sélectionnés. Lors de l'appel, les paramètres suivants lui sont transmis : la position de l'élément dans l'ensemble, le contenu actuel de l'élément :
$(sélecteur).append(function(numéro dans l'ensemble, contenu actuel de l'élément));
Le contenu peut également être non seulement du texte ordinaire, mais aussi un élément DOM ou un objet jQuery. Dans ce cas, ces éléments seront déplacés de leur position dans le code HTML.
Exemple
Insérons du texte à la fin du paragraphe donné :
<p id="test">text</p>
$('#test').append('!!!');
Le code HTML deviendra alors :
<p id="test">text!!!</p>
Exemple
Insérons du texte avec des balises à la fin du paragraphe donné :
<p id="test">text</p>
$('#test').append('<b>!!!</b>');
Le code HTML deviendra alors :
<p id="test">text<b>!!!</b></p>
Exemple
Trouvons tous les paragraphes et ajoutons à la fin de chacun d'entre eux son numéro d'ordre dans l'ensemble :
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
$('p').append(function(index, text){return index;});
Le code HTML deviendra alors :
<p>text0</p>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>