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

search |

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

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 :

Syntaxe jQuery

Syntaxe jQuery

svg polygone

Dessin d’un polygone en SVG

fonction quotemeta

Protége les méta caractè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