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>' :
<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') :
$('.www').wrap(document.createElement('div'));
Ou bien :
let 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 :
$('.www').wrap('<div></div>');
Le code HTML deviendra alors :
<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 :
$('.www').wrap('<div class="zzz"></div>');
Le code HTML deviendra alors :
<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>
Encapsulez chaque h3 dans une div
avec la classe aaa.
