oujood.com

jQuery La mèthode .insertAfter() insèrer des balisages aprés d'autres

La mèthode .insertAfter() insère des balisages ou des èlèments HTML existants après les èlèments sèlectionnès

search |

Dèfinition et Usage La mèthode insertAfter()

jQuery cours tutorial

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 :
  • Une expression de sèlecteur
  • Balise HTML
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

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

fonction vprintf, vprintf

Affiche une chaîne format e

Balise summary

Définit un en-tête visible d'un élément

border-color

Définit la couleur des quatre frontières



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci