logo oujood
🔍

jQuery wrap(), unwrap() et wrapAll()

Envelopper des éléments HTML ou supprimer leur parent avec jQuery

OUJOOD.COM

À quoi servent wrap(), unwrap() et wrapAll() ?

Ces trois méthodes jQuery permettent de manipuler la structure parentale d'un élément HTML sans toucher à son contenu. Concrètement : vous pouvez ajouter une balise autour d'un élément existant, en ajouter une autour d'un groupe d'éléments, ou au contraire retirer le parent d'un élément. C'est utile quand vous générez du HTML dynamiquement et que vous ne voulez pas réécrire tout le DOM — juste ajuster l'enrobage.

Les exemples de cette page utilisent jQuery 4.0, sorti en janvier 2026. C'est la première version majeure depuis près de dix ans : IE10 et les anciens navigateurs mobiles ne sont plus supportés, et l'API est alignée sur les standards web modernes. Les méthodes wrap(), unwrap() et wrapAll() sont inchangées et fonctionnent exactement comme dans jQuery 3.x.

La méthode wrap() — envelopper chaque élément séparément

wrap() place une structure HTML autour de chaque élément sélectionné, individuellement. Si vous avez trois paragraphes, chacun reçoit son propre conteneur.

Syntaxe

$(sélecteur).wrap(wrappingElement)

Paramètre Description
wrappingElement Obligatoire. Définit la balise qui va s'ajouter autour de chaque élément ciblé.
Trois formes possibles :
  • Une chaîne HTML : <div></div> ou <div><b></b></div>
  • Un nœud DOM créé avec document.createElement("div")
  • Un élément jQuery existant comme $(".maClasse") — il sera copié autant de fois que nécessaire

Exemple 1 — Envelopper chaque paragraphe dans un div

Au clic sur le bouton, chaque <p> de la page se retrouve dans son propre <div> avec un fond jaune. Deux paragraphes donnent donc deux divs distincts.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    /* Chaque p est enveloppé dans son propre div */
    $("p").wrap("<div></div>");
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<button>Envelopper chaque p dans un div</button>
</body>
</html>

Exemple 2 — wrap() avec une fonction

Quand la balise d'enrobage doit varier selon l'élément (index, contenu, attributs…), on passe une fonction à wrap(). Elle est appelée pour chaque élément et doit retourner la chaîne HTML à utiliser.

Syntaxe

$(sélecteur).wrap(function(index))

Paramètre Description
function(index) Obligatoire. Fonction appelée pour chaque élément. L'argument index (optionnel) correspond à la position de l'élément dans la sélection. La fonction doit retourner une chaîne HTML valide.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").wrap(function(index){
      /* La fonction reçoit l'index de l'élément (0, 1, 2…) */
      return "<div class='bloc-" + index + "'></div>";
    });
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<p>Premier paragraphe.</p>
<button>Envelopper avec une fonction</button>
</body>
</html>

Exemple 3 — Créer le conteneur avec document.createElement()

Plutôt qu'une chaîne HTML, on peut passer un nœud DOM créé à la volée. C'est la même chose en pratique, mais utile quand vous construisez l'élément par programmation avant de l'utiliser.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    /* document.createElement crée un vrai nœud DOM */
    $("p").wrap(document.createElement("div"));
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<button>Créer un div avec createElement</button>
</body>
</html>

La méthode unwrap() — retirer le parent

unwrap() fait exactement l'inverse de wrap() : elle supprime l'élément parent des éléments sélectionnés. L'élément ciblé reste intact, seul son conteneur direct disparaît.

Syntaxe

$(sélecteur).unwrap()

Aucun paramètre requis. La méthode remonte d'un niveau dans le DOM et retire le parent.

Exemple 4 — Supprimer le parent de chaque paragraphe

Dans cet exemple, chaque <p> est initialement dans un <div> jaune. Un clic sur le bouton retire ces divs : les paragraphes restent, mais leur fond disparaît.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    /* Retire le div parent de chaque p */
    $("p").unwrap();
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<div><p>Premier paragraphe.</p></div>
<div><p>Deuxième paragraphe.</p></div>
<button>Retirer le parent de chaque p</button>
</body>
</html>

Exemple 5 — Basculer entre wrap et unwrap

On combine les deux méthodes pour créer un toggle : le premier clic enveloppe, le second désenveloppe. C'est un cas classique pour afficher/masquer un style visuel sans modifier le contenu.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  var enveloppe = false;
  $("button").click(function(){
    if (!enveloppe) {
      /* Premier clic : envelopper */
      $("p").wrap("<div></div>");
      enveloppe = true;
    } else {
      /* Deuxième clic : retirer l'enveloppe */
      $("p").unwrap();
      enveloppe = false;
    }
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<button>Envelopper / Désenvelopper</button>
</body>
</html>

La méthode wrapAll() — un seul conteneur pour tous

Là où wrap() crée un conteneur par élément, wrapAll() place tous les éléments sélectionnés dans un unique conteneur commun. Les éléments sont regroupés dans le DOM à l'endroit du premier d'entre eux.

Syntaxe

$(sélecteur).wrapAll(wrappingElement)

Paramètre Description
wrappingElement Obligatoire. La balise HTML qui enveloppera l'ensemble des éléments sélectionnés d'un seul coup.
Formes acceptées :
  • Chaîne HTML : <div></div> ou imbriquée <div><b></b></div>
  • Nœud DOM : document.createElement("div")
  • Sélecteur jQuery : $(".conteneur") — l'élément existant est copié, pas déplacé

Note jQuery 4 : si vous passez une fonction à wrapAll(), elle est appelée une seule fois pour toute la collection — et non une fois par élément comme avec wrap(). Ce comportement a été fixé dans jQuery 3.0 et reste identique en jQuery 4.

Exemple 6 — Grouper tous les paragraphes dans un seul div

Ici, un clic regroupe les deux <p> dans un seul <div> jaune, contrairement à wrap() qui en aurait créé deux.

  📋 Copier le code

<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    /* Les deux p se retrouvent dans un seul et même div */
    $("p").wrapAll("<div></div>");
  });
});
</script>
<style>
div { background-color: yellow; }
</style>
</head>
<body>
<p>Premier paragraphe.</p>
<p>Deuxième paragraphe.</p>
<button>Regrouper tous les p dans un div</button>
</body>
</html>

Récapitulatif — quelle méthode choisir ?

Méthode Comportement Cas d'usage typique
wrap() Un conteneur par élément sélectionné Ajouter un style ou une structure individuelle à chaque item d'une liste
wrapAll() Un seul conteneur pour tous les éléments sélectionnés Regrouper plusieurs éléments dans un bloc commun (galerie, section…)
unwrap() Supprime le parent de chaque élément sélectionné Annuler un wrap(), nettoyer un markup trop imbriqué


← Méthodes pour manipuler HTML    Sommaire   

Par gerywa | Mis à jour le 12 mai 2026