jQuery possiede due metodi molto potenti per la manipolazione del DOM, ossia wrapInner() e wrap(). Il primo permette di racchiudere i contenuti di un elemento in un nuovo elemento, mentre il secondo racchiude l'intero elemento in un nuovo elemento. Possiamo usare questi due metodi per trasformare una struttura lineare in una tabella. Vediamo come.
Abbiamo questa struttura:
<div id="content">
<div>
<h2>...</h2>
<p>...</p>
</div>
<!-- si ripete -->
</div>
Possiamo usare jQuery in questo modo:
$(function() {
$('#content').wrapInner('<table></table>');
$('div', '#content').each(function() {
$(this).wrap('<tr></tr>');
});
$('h2', '#content').each(function() {
$(this).wrap('<th></th>');
});
$('p', '#content').each(function() {
$(this).wrap('<td></td>');
});
});
Ora la struttura è stata modificata in questo modo:
<div id="content">
<table>
<tr>
<div>
<th>
<h2>...</h2>
</th>
<td>
<p>...</p>
</td>
</div>
</tr>
<!-- si ripete -->
</table>
</div>
Potete visionare l'esempio finale in questa pagina.