jQuery: trasformazione e controllo del DOM

Uno dei motivi per cui jQuery è forse la libreria JavaScript più popolare sul web sta nella sua capacità di dare allo sviluppatore la facoltà di trasformare e manipolare il DOM a suo piacimento. In altre parole, jQuery ci da un controllo totale sul DOM, permettendoci di creare strutture complesse a partire da strutture semplici. In questo articolo vedremo appunto come trasformare una struttura lineare in una struttura annidata.

Partiamo dalla seguente struttura semplice:

<div id="content">
	<h2>...</h2>
	<p>...</p>
	<!--serie di paragrafi-->
	<h2>...</h2>
	<p>...</p>
	<!--serie di paragrafi-->
</div>

Vogliamo arrivare ad avere la seguente struttura:

<div id="content">
	<div class="post">
		<div class="author">
			<strong>...</strong> <a>...</a>
			<form class="contact">...</form>
		</div>
		<h2>...</h2>
		<div class="date">
			<span class="day-month">...</span>
			<span class="year">...</span>
		</div>
		<p>...</p>
		<!--serie di paragrafi-->
	</div>
	<!--altri elementi con classe post-->
</div>

Partiamo subito col suddividere la struttura di partenza in elementi con classe post:

$('h2', '#content').each(function() {
	
	var $h2 = $(this);
	$h2.nextUntil('h2').andSelf().wrapAll('<div class="post"></div>');
	
});

Abbiamo usato i seguenti metodi:

1. nextUntil(): seleziona gli elementi successivi fino all'elemento specificato (non incluso)
2. andSelf(): include l'elemento di partenza nella selezione
3. wrapAll(): racchiude tutti gli elementi specificati in un elemento HTML definito come stringa

Quindi passiamo ad aggiungere gli elementi date e author:

var date = new Date(document.lastModified);
var month = date.getMonth()+1;
var day =  date.getDate();
var year = date.getFullYear();
	
	
			   
$('div.post', '#content').each(function() {
    
   var dt = $('<div class="date"/>').html('<span class="day-month">' + day + ' ' + month +
			   '</span>' + '<span class="year">' + year + '</span></div>');
    
   var $h2 = $('h2', $(this));
   dt.insertAfter($h2);
    	
   var author = $('<div class="author"/>').html('<strong>Autore:</strong>' +
    					'<a href="mailto:gabriele.romanato@gmail.com">Gabriele Romanato</a>');
    					
   author.insertBefore($h2);	
    
});

Abbiamo usato i seguenti metodi:

1. html(): crea il contenuto HTML di un elemento usando la stringa passata come argomento
2. insertBefore(): inserisce un elemento prima di un altro
3. insertAfter(): inserisce un elemento dopo un altro elemento

Non ci resta quindi che inserire il form con classe contact:

$('div.author', '#content').each(function() {
    
   var $author = $(this);
   var form = $('<form/>', {
    action: '#',
    method: 'post',
    'class': 'contact'
    }).html('<div>' +
    		'<label for="nome">Nome</label>' +
    		'<input type="text" name="nome"/>' +
    		'<label for="email">E-mail</label>' +
    		'<input type="text" name="email"/>' +
    		'<label for="oggetto">Oggetto</label>' +
    		'<input type="text" name="oggetto"/>' +
    		'<label for="messaggio">Messaggio</label>' +
    		'<textarea name="messaggio" rows="15" cols="15"/>' +
    		'<p><input type="submit" name="invia" value="Invia" /></p>'+
    		'</div>');
   form.appendTo($author);
    
    
});

Abbiamo usato il metodo appendTo(), che aggiunge un elemento all'elemento di destinazione.

Potete visionare l'esempio finale in questa pagina.