Définition et usage méthode append
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 : ajouter une chaine HTML à tous les paragraphes.
Sélectionner 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>
Ajouter contenu Utilisation d'une fonction
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 1: ajoute chaine à tous les paragraphes en utilisant une fonction.
Sélectionner 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 2: ajoute chaine HTML à tous les paragraphes en utilisant une fonction.
Sélectionner 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>
Arguments supplémentaires
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 :
<!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>
Par gerywa 25 juillet 2014
La méthode secrète likes sans fin sur Facebook
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
