Modificare il DOM con jQuery

jQuery oltre a tutto ciò che abbiamo visto fino ad oggi, fornisce una serie di funzioni per inserire nuovo contenuto all’interno della nostra pagina web.
Questo contenuto può essere inserito prima o dopo un certo contenitore, può essere posto prima di un selettore.
Insomma non mancano i metodi per modificare la pagina.

Metodo	Scopo
append(contenuto)	Appone il contenuto all’interno di ogni elemento corrispondente.
appendTo(selettore)	appone tutti gli elementi specificati, ad un altro set di elementi specificati.
prepend(contenuto)	Pre-appone il contenuto all’interno di ogni elemento corrispondente.
prependTo(selettore)	Pre-appone a tutti gli elementi specificati, un’altra setta di elementi specificati.
after(contenuto)	inserisce contenuto dopo ogni elemento corrispondente.
before(contenuto)	inserisce contenuto dopo ogni elemento corrispondente.
insertAfter(selettore)	inserisce tutti gli elementi corrispondenti prima di un certo set di elementi specificati.
insertBefore(selettore)	inserisce tutti gli elementi corrispondenti dopo un determinato set di elementi specificati.

Come sempre usare jQuery è veramente semplice ed immediato, e con gli esempi che seguono sarà tutto chiarito.

Per vedere il funzionamento di questa serie di proprietà di jQuery, riprendiamo il solito codice HTML composto da quattro elementi di tipo lista e da quattro paragrafi che abbiamo adoperato in quasi tutte le lezioni.

In questo primo esempio vediamo come per mezzo della funzione append possiamo andare ad inserire a tutti quanti gli elementi di tipo paragrafo un certo contenuto.
Nel nostro caso inseriremo alla fine di tali elementi la stringa ” contenuto inserito in append”.

$("p").append(" contenuto inserito in append");

Possiamo utilizzare le funzioni che abbiamo visto nelle prime lezioni di jQuery in combinazione con queste, che ad esempio andare ad inserire questo contenuto magari soltanto al primo oppure all’ultimo paragrafo, in questo modo:

$("p:last").append(" contenuto inserito in append");
//oppure
$("p:first").append(" contenuto inserito in append");

vediamo come funziona invece la prepend.

$("p").prepend("Contenuto inserito in prepend ");

Come vediamo in questo caso la stringa “Contenuto inserito in prepend ” viene inserita prima di ogni elemento di tipo paragrafo.
Vediamo adesso delle funzioni che invece si permettono di manipolare l’ordine in cui appaiono i dati, e di “sconvolgere” l’ordine del DOM.

Nei due esempi che seguono vediamo nel primo la funzione appendTo, nel quale l’ultimo paragrafo viene messo subito dopo il primo.
Nel secondo vediamo in azione invece il metodo prependTo attraverso il quale invece l’ultimo paragrafo viene messo per primo.

$("p:last").appendTo("p:first");

Ecco ora il prependTo.

$("p:last").prependTo("p:first");