La mèthode .insertAfter() insère des balisages ou des èlèments HTML existants après les èlèments sèlectionnès
La 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 : 📝 Copier 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 : 📝 Copier 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>