Spécifie l'indentation de la première ligne dans un bloc de texte
La méthode append() insère le contenu spécifié à la fin des éléments sélectionnés(mais toujours à l'intérieur)
La méthode append() insère le contenu spécifié à la fin des éléments sélectionnés(mais toujours à l'intérieur).
Astuce: Les méthodes append() et appendTo() font la même chose. La différence est dans la syntaxe: le placement des contenus et de sélection , et que appendTo() ne peut pas ajouter du contenu en utilisant une fonction.
Syntaxe
$(selecteur).append(contenu)
Paramètre |
Description de |
---|---|
contenu |
Requis. Spécifie le contenu, élément DOM, chaine HTML ou objet jQuery à insérer à la fin de chaque élément de l'ensemble des éléments sélectionnés |
Note : La méthode .append() insère le contenu spécifié comme dernier enfant de chaque élément sélectionné (pour l'insérer comme premier enfant, utilisez .prepend() ).
Exemple : 📝 Copier le code
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>jQuery demo </title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("p").append("<strong>Bien venues </strong>");
});
</script> </head>
<body>
<p>Je voudrais vous dire: </p>
</body>
</html>
La méthode append() permet d'insérer le contenu spécifié à la fin de l'élément sélectionné en utilisant une fonction.
Syntaxe
$(selecteur).append(function(index,html))
function(index,html) Une fonction qui retourne une chaine HTML, éléments DOM ou objet jQuery à insérer à la fin de chaque élément de l'ensemble des éléments sélectionnés. Reçoit la position d'index de l'élément
Paramètre |
Description de |
---|---|
fonction (index, html) |
Requis. Indique une fonction qui renvoie le contenu à insérer.
|
Exemple : 📝 Copier le code
<!DOCTYPE html>
<html lang="fr"> <head>
<meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").append(document.createTextNode("Hello")); }); </script> </head> <body> <p>Je voudrais vous dire: </p> </body> </html>
Exemple : 📝 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("button").click(function(){ $("p").append(function(index){ return "<b>cet élément a un index " + index + "</b>"; }); }); }); </script> </head> <body> <h1>Ceci est le titre</h1> <p>Ceci est un paragraphe.</p> <p>Ceci est un autre paragraphe.</p> <button>Ajouer</button> </body> </html>
Similaire à d'autres méthodes
d'ajout de contenu tels que par exemple :
.prepend() , .before() , et after()
La méthode append() peut prendre
aussi plusieurs arguments comme entrée. Les
entrées supportées peuvent être
des éléments DOM, objets jQuery,
chaines HTML et tableaux
d'éléments DOM.
Syntaxe
$(selecteur).append(contenu,[contenu2])
contenu2 : Arguments supplémentaires
Exemple :
Exemple : 📝 Copier le code
<!DOCTYPE html> <html lang="fr"> <head> <meta charset="utf-8"> <title>jQuery demo </title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("p").append("bonjour","à vous","tous"); }); </script> </head> <body> <p>Je voudrais vous dire: </p> </body> </html>