OUJOOD.COM
Définition et usage de la méthode .insertAfter() en jQuery
jQuery – Cours et tutoriel de référenceLa méthode .insertAfter() est une fonction essentielle de la manipulation du DOM jQuery qui permet d'insérer des balises HTML ou des éléments existants immédiatement après les éléments ciblés par un sélecteur. Elle offre une approche intuitive pour enrichir dynamiquement la structure d'une page web sans rechargement.
Important : Lorsque .insertAfter() est utilisée avec un élément existant dans le DOM, cet élément est déplacé (et non cloné) depuis sa position d'origine vers sa nouvelle position après la cible. Pour conserver l'élément source à sa place, il faut utiliser .clone().insertAfter().
Syntaxe de la méthode .insertAfter()
$(contenu).insertAfter(sélecteur)
| Paramètre | Description |
|---|---|
| contenu | Obligatoire. Définit ce qui sera inséré. Valeurs possibles :
|
| sélecteur | Obligatoire. Indique l'emplacement cible après lequel le contenu sera inséré (identifiant, classe, balise, etc.) |
Différence clé : Les méthodes .after() et .insertAfter() produisent le même résultat, mais leur syntaxe est inversée. Avec .after(), on part du sélecteur cible pour y injecter du contenu : $('.cible').after('<p>...</p>'). Avec .insertAfter(), on part du contenu pour l'insérer après la cible : $('<p>...</p>').insertAfter('.cible'). Le choix dépend de la lisibilité du code et du flux logique de votre script jQuery.
Comportement avec plusieurs éléments cibles
Lorsque le sélecteur correspond à plusieurs éléments, le contenu est inséré après chacun d'eux. Prenons cet exemple HTML :
<div class="intro"> <h2>Titre</h2> <div class="cible">Hello</div> <div class="cible">Goodbye</div> </div>
En exécutant :
$('<p>Inséré</p>').insertAfter('.cible');
Le DOM devient :
<div class="intro"> <h2>Titre</h2> <div class="cible">Hello</div> <p>Inséré</p> <div class="cible">Goodbye</div> <p>Inséré</p> </div>
Un paragraphe <p> est automatiquement dupliqué et injecté après chaque élément correspondant au sélecteur .cible.
Déplacement d'un élément existant avec .insertAfter()
Quand on sélectionne un élément déjà présent dans le DOM et qu'on l'insère ailleurs via .insertAfter(), cet élément est déplacé, pas copié :
$('h2').insertAfter($('.intro'));
Résultat : le <h2> quitte son emplacement d'origine et se retrouve après le bloc .intro :
<div class="intro"> <div class="cible">Hello</div> <div class="cible">Goodbye</div> </div> <h2>Titre</h2>
Pour conserver l'élément original en place tout en insérant une copie, utilisez $('h2').clone().insertAfter($('.intro'));.
Exemple 1 : Déplacer un élément existant après un autre via .insertAfter()
Cet exemple illustre comment un paragraphe existant est déplacé après un div cible au clic d'un bouton. C'est un cas classique de réorganisation dynamique du DOM jQuery.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery insertAfter - Déplacer un élément</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
// Au clic sur le bouton, on déclenche l'insertion
$("button").click(function() {
// .insertAfter() déplace <p> après #div-cible
// L'élément <p> disparaît de son emplacement d'origine
$("p").insertAfter("#div-cible");
});
});
</script>
<style>
/* Le div cible est mis en surbrillance jaune pour visualiser l'insertion */
#div-cible { background: yellow; padding: 10px; margin: 10px 0; }
</style>
</head>
<body>
<!-- Ce paragraphe sera DÉPLACÉ après #div-cible au clic -->
<p>Ce paragraphe sera déplacé et inséré <strong>après</strong> le div cible au clic.</p>
<div id="div-cible">Div cible (fond jaune)</div>
<button>Déplacer le paragraphe après la cible</button>
</body>
</html>
Exemple 2 : Créer et insérer un nouvel élément HTML après chaque paragraphe
Dans cet exemple, un nouvel élément <span> est créé dynamiquement et inséré après chaque balise <p> de la page. C'est une technique courante pour ajouter des libellés, badges ou séparateurs entre des éléments existants.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery insertAfter - Insérer un span après chaque p</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("button").click(function() {
// On crée un nouveau <span> avec du contenu HTML
// .insertAfter("p") l'insère après CHAQUE balise <p> de la page
$("<span><strong> ✅ Fin du paragraphe</strong></span>").insertAfter("p");
});
});
</script>
</head>
<body>
<p>Premier paragraphe de contenu.</p>
<p>Deuxième paragraphe de contenu.</p>
<br>
<!-- Le bouton déclenche l'insertion du span après chaque <p> -->
<button>Insérer un span après chaque paragraphe</button>
</body>
</html>
Exemple 3 : Cloner un élément et l'insérer après une cible sans le supprimer
Pour insérer une copie d'un élément existant après une cible tout en le conservant à sa position d'origine, combinez .clone() avec .insertAfter(). Cette technique est utile pour dupliquer des composants d'interface dynamiquement.
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>jQuery clone() + insertAfter()</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function() {
$("#btn-cloner").click(function() {
// .clone() crée une copie profonde de l'élément #boite
// .insertAfter("#zone-cible") place la copie après le div cible
// L'original #boite reste intact à sa position initiale
$("#boite").clone().insertAfter("#zone-cible");
});
});
</script>
<style>
#boite { background:#d0f0c0; padding:8px; margin:8px 0; display:inline-block; }
#zone-cible { background:#ffd700; padding:8px; margin:8px 0; }
</style>
</head>
<body>
<div id="boite">📦 Élément source (conservé)</div>
<div id="zone-cible">🎯 Zone cible (la copie apparaît après moi)</div>
<br>
<button id="btn-cloner">Cloner et insérer après la cible</button>
</body>
</html>
Par carabde | Mis à jour le 3 mars 2026