Ciò che rende affascinante un'applicazione web dei giorni nostri è la diffusa interazione fra gli elementi della pagina e l'utente. Poter manipolare facilmente i nodi di un documento in risposta ad un click
dell'utente diventa quindi una feature fondamentale per un framework JavaScript.
Vedremo più avanti come jQuery sia in grado di gestire con efficacia le chiamate AJAX, ora invece ci focalizzeremo su come sia possibile inserire ed eliminare dinamicamente interi pezzi di HTML con poche righe di codice in piena compatibilità fra tutti i browser.
Riepilogo
Anzitutto un riepilogo: abbiamo già visto come la funzione $ accetti codice HTML per creare nuovi nodi del DOM anche con strutture nidificate. Per esempio il codice seguente creerà un nuovo elemento
nell'oggetto jQuery:
$("<p>Nuovo <strong>paragrafo</strong></p>");
Allo stesso modo abbiamo visto come .html() e .text() servano per manipolare il contenuto HTML e testuale degli di una collezione:
$("p").html("Testo del <strong>paragrafo</strong>");
Questi due metodi, tuttavia, interessano tutto il contenuto di un elemento rimpiazzandolo completamente, mentre creare un nuovo elemento non significa averlo posizionato nel documento.
Nelle prossime lezioni vedremo come sia possibile inserire dinamicamente i nuovi elementi in posizioni ben precise del documento HTML e come si possano clonare ed eliminare i nodi del DOM, nonché cambiarne la posizione.
Inserire elementi annidati
Una regola che vale per tutti i metodi del gruppo manipulation è che ognuno presenta la possibilità di gestire la manipolazione a partire da un contenuto preesistente oppure da un nuovo contenuto. Ecco allora che per inserire un nuovo elemento alla fine di una lista puntata possiamo scrivere:
//seleziono un elemento e vi inserisco un nodo
$("#menu").append("<li>lista</li>");
oppure:
//inserisco un nuovo nodo nell'elemento selezionato
$("<li>lista</li>").appendTo("#menu");
Questi stessi metodi possono risultare utili per spostare un elemento da una posizione all'altra nel DOM:
//sposta i nodi da una lista all'altra
$("#menu2 li").appendTo("#menu");
Analogamente, è possibile anche inserire nuovi nodi o spostarli all'inizio di un elemento utilizzando .prepend() e .prependTo()
Ecco una pagina di esempio.