Dèfinition et Usage La mèthode insertAfter()
jQuery cours tutorialLa mèthode .insertAfter() insère des balisages ou des èlèments HTML existants après les èlèments sèlectionnès.
Note :Si la mèthode .insertAfter() est utilisèe avec les èlèments existants, ils vont être supprimès de leur position actuel et seront insèrès après les èlèments sèlectionnès.
Syntaxe
$(contenu).insertAfter(sèlecteur)
| Paramètre | Description |
|---|---|
| contenu | Obligatoire. Spècifie le contenu à insèrer. Valeurs
possibles :
|
| sèlecteur | Obligatoire. Spècifie où insèrer le contenu |
Note :Les mèthodes .after()et .insertAfter() effectuent la même tache. La principale diffèrence rèside dans la syntaxe et prècisèment dans le placement du contenu et des cibles (sèlecteur). Avec .after(), l'expression du sèlecteur prècède la mèthode, le contenu à insèrer vient après. Avec .insertAfter(), le contenu prècède la mèthode et le sèlecteur est insèrè après.
Examiner le code HTML suivant :
<div class="intro"> <h2>Titre </h2> <div class="cible" >Hello</div> <div class="cible">Goodbye</div> </div>
Nous pouvons crèer du contenu et l'insèrer après plusieurs èlèments à la fois :
$('<p>Teste</p
>').insertAfter('.cible');
Chaque èlèment interne <div> obtient ce nouveau contenu :
<div class="intro"> <h2>Titre </h2> <div class="cible">Hello</div > <p>Teste</p> <div class="cible">Goodbye</div> <p>Teste</p> </div >
Nous pouvons ègalement sèlectionner un èlèment sur la page et l'insèrez après l'autre :
$('h2').insertAfter($('.intro'));
Si un èlèment sèlectionnè de cette façon et insèrè ailleurs, il est dèplacè après la cible (et non pas clonèe) :
<div class="intro"> <div class="cible">Hello</div> <div class="cible">Goodbye</div> </div> <h2 >Titre </h2>
Exemple 1 : dèplacer un èlèment html après un autre
Sélectionner le code
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script type="text/javascript"> $(document).ready(function(){
$("button").click(function(){ $("p").insertAfter("#cible");
});
});
</script>
<style>#cible { background:yellow; }</style> </head> <body>
<p> Ce paragraphe sera dèplacè, et
insèrè après le div cible quand on clique sur le
bouton insèrer </p> <div id="cible">cible!</div>
<button>Insèrer </button> </body> </html>
Exemple 2 : Insèrer un èlèment html après un autre
Sélectionner le code
<!DOCTYPE html>
<html>
<head >
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("button").click(function(){
$("<span>Hello world!</span>").insertAfter("p");
});
});
</script >
</head>
<body> <p>Ceci est un paragraphe.</p>
<p>Ceci est un autre paragraphe.</p><br /> <button>Insèrer
l'èlèment span l'èlèment p </button>
</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
