logo oujood
🔍

jQuery La méthode .insertBefore() Insérer des éléments HTML avant d'autres

OUJOOD.COM

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

jQuery cours tutorial

La méthode .insertBefore() est une fonction jQuery qui permet d'insérer des balises ou des éléments HTML (nouveaux ou existants) avant les éléments ciblés par le sélecteur.

Note importante : Si la méthode .insertBefore() est utilisée avec des éléments déjà présents dans le DOM, ces éléments seront déplacés de leur position actuelle vers leur nouvelle position avant les éléments sélectionnés. Ils ne seront pas dupliqués mais simplement repositionnés.

Syntaxe

$(contenu).insertBefore(sélecteur)

Paramètre Description
contenu Obligatoire. Spécifie le contenu à insérer. Valeurs possibles :
  • Une expression de sélecteur jQuery (ex : $('div'))
  • Une balise HTML (ex : '<p>Texte</p>')
  • Un élément DOM
  • Un objet jQuery
sélecteur Obligatoire. Spécifie la cible devant laquelle le contenu sera inséré. Peut être un sélecteur CSS, un élément DOM ou un objet jQuery.

Note : Les méthodes .before() et .insertBefore() effectuent la même tâche mais diffèrent par leur syntaxe. Avec .before(), vous sélectionnez d'abord la cible puis indiquez le contenu à insérer : $(cible).before(contenu). Avec .insertBefore(), c'est l'inverse : vous définissez d'abord le contenu puis la cible : $(contenu).insertBefore(cible).

Exemple de base

Considérons 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 simultanément :

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

Résultat : Chaque élément avec la classe .cible sera précédé par ce nouveau contenu :

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

Déplacement d'éléments existants

Nous pouvons également sélectionner un élément existant et le déplacer avant un autre :

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

Si un élément sélectionné est inséré ailleurs dans le DOM, il est déplacé (pas cloné) avant la cible :

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

Exemple 1 : Insérer tous les paragraphes avant un élément avec l'id = cible

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; 
    padding: 10px;
    margin: 10px 0;
}
</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 élément span avant chaque paragraphe

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 chaque paragraphe</button> 
</body> 
</html>

Points clés à retenir

  • .insertBefore() insère du contenu avant l'élément ciblé
  • Si le contenu existe déjà dans le DOM, il sera déplacé (pas dupliqué)
  • La méthode peut cibler plusieurs éléments simultanément
  • Syntaxe inverse de .before() mais résultat identique


jQuery les méthodes pour manipuler HTML
Par gerywa 25 juillet 2014 | mise à jour 25 juillet 2025