Création et encapsulation d'éléments dans jQuery

Avant d'encapsuler avec une balise, il est possible de créer au préalable un élément dans le document. Encapsulons les paragraphes présentés ci-dessous avec les balises '<div></div>' :

html<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>

Pour cela, on peut préalablement créer un élément dans le document à l'aide de document.createElement('div') :

javascript$('.www').wrap(document.createElement('div'));

Ou bien :

javascriptlet div = document.createElement("div");
$('.www').wrap(div);

Le paramètre peut accepter non seulement le nom de la balise, mais aussi une construction comme '<div></div>' - dans ce cas, l'effet sera absolument identique :

javascript$('.www').wrap('<div></div>');

Le code HTML deviendra alors :

html<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>

Lors de l'utilisation de la deuxième méthode, dans la balise ouvrante (dans notre cas '<div>') on peut écrire n'importe quels attributs, et l'encapsulation se fera avec ces attributs.

Encapsulons nos paragraphes avec une div ayant la classe zzz :

javascript$('.www').wrap('<div class="zzz"></div>');

Le code HTML deviendra alors :

html<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<div class="zzz"><p class="www">text</p></div>
<p>text</p>