oujood.com

jQuery La mèthode .insertBefore() insèrer des èlèment html avant d'autres

La mèthode .insertBefore() insère des balises ou des èlèments HTML existants avant les èlèments sèlectionnès

chercher |

Dèfinition et Usage La mèthode .insertBefore()

jQuery cours tutorial

La mèthode .insertBefore() insère des balises ou des èlèments HTML existants avant les èlèments sèlectionnès.

Note :Si la mèthode .insertBefore() est utilisèe avec les èlèments existants, ils vont être dèplacès de leur position actuel et insèrès avant les èlèments sèlectionnès.

Syntaxe

$( contenu).insertBefore(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 . before()et .insertBefore() 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. Avec . before(), l'expression de sèlecteur prècéde la mèthode et le contenu à insèrer vient aprés. Avec .insertBefore(), le contenu prècéde la mèthode, et c'est le sèlecteur qui vient 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 avant plusieurs èlèments à la fois :

 $('<p>Test</p>').insertBefore('.cible'); 

Chaque èlèment <div> sera prècèdè par ce nouveau contenu comme suit :

 
<div class="intro">
  <h2>Titre </h2>  <p>Test</p>  
  <div class="cible">Hello</div>
  <p>Test</p>  <div class="cible">Goodbye</div>  
</div> 

Nous pouvons ègalement sèlectionner un èlèment sur la page et l'insèrer avant un autre :

 
$('h2').insertBefore($('.intro')); 

Si un èlèment sèlectionnè cette façon est insèrè ailleurs, il est dèplacè avant la cible (ne pas clonèe) :

 <h2>Titre </h2>  
<div class="intro">
	<div class="cible">Hello</div> 
	<div class="cible">Goodbye</div>  
</div> 

Exemple 1: Insére tous les paragraphes avant un èlèment dont l'id = cible .

Sélectionner le code

<!DOCTYPE html> 
<html> 
<head> 
< script src="https://code.jquery.com/jquery-3.6.0.min.js"></script >
<script> 
$(document).ready(function(){
$("button").click(function(){ $("p").insertBefore("#cible"); 
}); 
}); 
</script>
<style>
#cible { background:yellow; }
</style > 
</head> 
<body>
<div id="cible"> Cible! </div>
<p>Ce paragraphe sera
dèplacè avant le div dont l'id est cible </p>
<button>Insèrer </button> 
</body> 
</html>

 

Exemple 2 : Insèrer un span avant chaque èlèment p.

Sélectionner le code

<!DOCTYPE html> 
<html> <head> 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script> 
$(document).ready(function(){
$("button").click(function(){ 
$("<span >Hello world!</span>").insertBefore("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 avant l'èlèment p
</button> 
</body> 
</html>

 



Par gerywa 25 juillet 2014

MARKETPOWER-IA
Logiciel d'I.A.
Logiciel d'I.A. 100% Français pour lancer son business en ligne

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'ARGENT
GRÂCE À FACEBOOK 
N'A JAMAIS ÉTÉ SI FACILE


Consulter


1tpe