jQuery consente di aggiungere dinamicamente nuovi elementi alla pagina in modo molto più potente e semplice rispetto a javascript. Il problema semmai in questo caso è l'abbondanza di metodi diversi che fanno sostanzialmente la stessa cosa, abbondanza che può facilmente confondere il programmatore.
Per cercare di semplificare un po' le cose, diciamo che ci sono due possibili strade alternative:
Per capire meglio la differenza fra i due gruppi di metodi (i quali, come detto, fanno la stessa cosa) si consideri l'esempio seguente:
$("button").click(function(){ $("#pippo").after("<p>Ciao mondo</p>"); });
$("button").click(function(){ $("<p>Ciao mondo!</p>").insertAfter("#pippo"); });
In entrambi i casi un paragrafo contenente la scritta "Ciao mondo!" viene inserito dopo l'elemento #pippo. In pratica il DOM viene modificato nel seguente modo:
Come si vede il paragrafo p viene aggiunto dopo l'elemento #pippo e ne diventa un sibling (fratello) nell'albero del DOM.
Si consideri anche l'esempio seguente:
$("button").click(function(){ $("#pippo").append("<p>Ciao mondo</p>"); });
$("button").click(function(){ $("<p>Ciao mondo!</p>").appendTo("#pippo"); });
In entrambi i casi il paragrafo viene inserito dentro (come child) nell'elemento #pippo. Il DOM viene modificato nel seguente modo:
In pratica la differenza fra after e insertAfter e append e appendTo è di tipo sintattico: i metodi after/append vengono applicati al nodo dopo il quale si vuole inserire il nuovo elemento; invece insertAfter/appendTo ricevono come parametro il nodo su cui effettuare l'inserimento. Se la cosa risulta un po' confusa, non ci si preoccupi troppo. In pratica conviene scegliere (è una questione di gusto) quale tipo di istruzioni di modifica del DOM si preferisce usare e poi utilizzare sempre quello (evitando, soprattutto agli inizi, di mescolare le due tipologie, col rischio di confondersi).
La tabella seguente cerca di fare un po' di chiarezza, nei limiti del possibile:
Scopo | Metodo gruppo 1 | Metodo gruppo 1 |
Inserire un sibling dopo il nodo | after | insertAfter |
Inserire un sibling prima del nodo | before | insertBefore |
Inserire un child del nodo alla fine dei child esistenti | append | appendTo |
Inserire un child del nodo all'inizio dei child esistenti | prepend | prependTo |
Per quanto riguarda la cancellazione dinamica di nodi dal DOM, jQuery offre due metodi principali:
La differenza fra i due è che remove elimina il nodo (o i nodi) selezionato dal DOM; invece empty elimina tutti i nodi child del nodo selezionato.
Si consideri l'esempio seguente:
<!-- Struttura iniziale dell'elemento --> <div> <p><strong>foo</strong></p> </div> // Codice jQuery e corrispondente effetto $('p').empty(); // --> "<div><p></p></div>" $('p').remove(); // --> "<div></div>"
In conclusione si consideri l'esempio che segue:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("ol").append("<li>Elemento aggiunto</li>"); }); $("#btn2").click(function(){ $("ol li").filter(":last-child").remove(); }); }); </script> </head> <body> <ol> <li>Elemento 1</li> <li>Elemento 2</li> <li>Elemento 3</li> </ol> <button id="btn1">Aggiunge un elemento alla lista</button> <button id="btn2">Rimuove l'ultimo elemento dalla lista</button> </body> </html>
Si noti l'uso del metodo filter per ottenere l'ultimo nodo li, cioè l'ultimo elemento inserito. Il lettore può provare qui sotto il funzionamento dello script:
precedente -
successiva
Sito realizzato in base al template offerto da
http://www.graphixmania.it