Dèfinition et Usage La mèthode .insertBefore()
jQuery cours tutorialLa 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>
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
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'ARGENTGRÂCE À FACEBOOK
N'A JAMAIS ÉTÉ SI FACILE
Consulter
