Gestione Contenuti della Pagina HTML con jQuery

Come abbiamo visto finora jQuery offre un gran numero di funzioni per modificare il contenuto della pagina web.
JQuery però non è in grado soltanto di modificare, ma è anche in grado di replicare, copiare o avvolgere (il “wrapping” della pagina) il contenuto.
Vediamo nella tabella qui sotto quali sono le funzioni che jQuery mette a nostra disposizione a tale scopo.

Metodo	Scopo
wrap(html)	Avvolge gli elementi corrispondenti con l’HTML specificato.
wrap(elemento)	Avvolge  ogni elemento specificato con l’elemento specificato
wrapAll(html)	avvolge tutti gli elementi corrispondenti nel set specificato nella contenuto HTML specificato.
wrapAll(elemento)	avvolge tutti gli elementi specificati in un singolo elemento di wrapping
wrapInner(html)	avvolge tutti gli elementi figli degli elementi specificati con una struttura di tipo HTML.
wrapInner(elemento)	avvolge tutti gli elementi di tuo figlio contenuti in ogni elemento corrispondente in una struttura di tipo DOM
replaceWith(contenuto)	replica tutti gli elementi corrispondenti con elementi di tipo HTML oppure DOM.
replaceAll(selettore)	replica gli elementi corrispondenti con il selettore specificato degli elementi corrispondenti.
empty()	rimuove tutti i nodi di tipo figlio specificati dal set di elementi corrispondenti
remove()	rimuovere gli elementi corrispondenti dal DOM
clone()	Clona gli elementi DOM corrispondenti e seleziona i cloni.
clone(bool)

Come al solito penso di non essere stato molto chiaro con questa tabella, ma recupero con dagli esempi che seguono.

Prendiamo il solito codice HTML, il primo esempio che andiamo a vedere riguarda la funzione di wrap.

$("p").wrap("<div style='border: 3px solid black' />");

l’effetto che produciamo in questo caso è quello che ogni elemento di tipo paragrafo viene contornato da un bordo nero alto tre pixel.

Avremmo però potuto avere la necessità di prendere tutti quanti gli elementi di tipo paragrafo, per avvolgerli all’interno di un unico blocco contenitore di tipo DIV.
Per farlo dobbiamo utilizzare il wrapAll. Ecco come:

$("p").wrapAll("<div style='border: 3px solid black' />");

L’effetto che si produce è quello di avere un unico blocco DIV che contiene tutti quanti gli elementi di tipo paragrafo.
Vediamo adesso come si comporta la funzione empty.
In questo caso ce la prendiamo con la lista con questo semplice codice:

$("ul").empty();

La lista scompare dal browser.