Convertit un texte logique hébreux en texte visuel
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>
Exemple : Copier 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 : Copier 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>