Creazione e wrapping di elementi in jQuery
Prima di avvolgere con un tag, puoi prima creare
un elemento nel documento. Avvolgiamo i paragrafi
presentati di seguito nei tag '<div></div>':
<p class="www">testo</p>
<p class="www">testo</p>
<p class="www">testo</p>
<p>testo</p>
Per fare questo, puoi prima creare un elemento nel
documento utilizzando
document.createElement('div'):
$('.www').wrap(document.createElement('div'));
Oppure:
let div = document.createElement("div");
$('.www').wrap(div);
Come parametro puoi passare non solo il nome
del tag, ma anche una costruzione come '<div></div>'
- in questo caso l'effetto sarà assolutamente lo stesso:
$('.www').wrap('<div></div>');
Il codice HTML diventerà così:
<div><p class="www">testo</p></div>
<div><p class="www">testo</p></div>
<div><p class="www">testo</p></div>
<p>testo</p>
Quando si utilizza il secondo metodo, nel
tag di apertura (nel nostro caso '<div>')
puoi scrivere qualsiasi attributo, e
il wrapping avverrà insieme a questi attributi.
Avvolgiamo i nostri paragrafi in un div con classe
zzz:
$('.www').wrap('<div class="zzz"></div>');
Il codice HTML diventerà così:
<div class="zzz"><p class="www">testo</p></div>
<div class="zzz"><p class="www">testo</p></div>
<div class="zzz"><p class="www">testo</p></div>
<p>testo</p>
Avvolgi ogni h3 in un div
con classe aaa.