La mèthode .insertBefore() insère des balises ou des èlèments HTML existants avant les èlèments sèlectionnès
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 :
|
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>
<!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>
<!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>
Livre numérique court pour comprendre la méthode secrète permettant d'obtenir des likes sans fin sur Facebook.
GAGNER DE L'ARGENT