Tworzenie i opakowywanie elementów w jQuery
Przed opakowaniem tagiem można wstępnie utworzyć
element w dokumencie. Owińmy przedstawione
poniżej akapity tagami '<div></div>':
<p class="www">text</p>
<p class="www">text</p>
<p class="www">text</p>
<p>text</p>
W tym celu można wstępnie utworzyć element w
dokumencie za pomocą
document.createElement('div'):
$('.www').wrap(document.createElement('div'));
Lub:
let div = document.createElement("div");
$('.www').wrap(div);
Parametrem można przekazywać nie tylko nazwę
tagu, ale także taką konstrukcję - '<div></div>'
- w tym przypadku efekt będzie absolutnie taki sam:
$('.www').wrap('<div></div>');
Kod HTML będzie wyglądać tak:
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<div><p class="www">text</p></div>
<p>text</p>
Przy użyciu drugiego sposobu, w
tag otwierający (w naszym przypadku '<div>')
można wpisywać dowolne atrybuty, przy czym
opakowanie będzie wraz z tymi atrybutami.
Owińmy nasze akapity divem z klasą
zzz:
$('.www').wrap('<div class="zzz"></div>');
Kod HTML będzie wyglądać tak:
<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>
Owiń każdy h3 w div
z klasą aaa.