Définition et usage La méthode after()
La méthode after() insère le contenu spécifiée après les éléments sélectionnés.
Syntaxe:
(contenu1 [, contenu2])
| Paramètre | Description |
|---|---|
| Contenu1 | Requis. Chaine HTML, élément DOM ou objet jQuery à insérer après chaque élément dans l'ensemble des éléments sélectionnés. |
| Contenu2 | Un ou plusieurs éléments supplémentaires DOM, tableaux d'éléments, chaines HTML ou objets jQuery à insérer après chaque élément dans l'ensemble des éléments sélectionnés. |
Exemple 1: insère HTML après tous les paragraphes.
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").after("<b>ceci est ajouter aprés ce paragraphe</b>");
});
});
</script>
</head>
<body>
<h1>Ceci est un titre</h1>
<p>Ceci est un paragraphe.</p>
<br />
<button>Ajouter aprés l'élément p</button>
</body>
</html>
Insérer contenu à l'aide d'une fonction
En utilisant une fonction pour insérer le contenu spécifié après les éléments sélectionnés.
Syntaxe:
$(selecteur).after(function(index))
|
Paramètre |
Description de |
|---|---|
| fonction (index) | Requis. Indique une fonction qui renvoie le contenu à insérer.
|
Exemple 2: Insérer un contenu à l'aide d'une fonction
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").after(function(n){
return "<div>L'élément p ci dessus a un indexe " + n + "</div>";
});
});
});
</script>
</head>
<body>
<h1>ceci est le titre</h1>
<p>ceci est un paragraphe.</p>
<p>ceci est un aytre paragraphe.</p>
<button>Inserer le contenu chaque p</button>
</body>
</html>
Par gerywa 25 juillet 2014