PROGRAMMIAMO
JS - Modificare dinamicamente il DOM
Aggiungere nodi al DOM

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:

  1. append, prepend, after, before
  2. appendTo, prependTo, insertAfter, insertBefore

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:

<!-- Struttura del DOM prima dell'esecuzione del codice jQuery -->
<div id='pippo'>
...
</div>
<!-- Struttura del DOM dopo l'esecuzione del codice jQuery -->
<div id='pippo'>
...
</div>
<p> Ciao mondo </p>

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:

<!-- Struttura del DOM prima dell'esecuzione del codice jQuery -->
<div id='pippo'>
...
</div>
<!-- Struttura del DOM dopo l'esecuzione del codice jQuery -->
<div id='pippo'>
...
<p> Ciao mondo </p>
</div>

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

 

Eliminare nodi dal DOM

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>"

 

Esempio riassuntivo

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:

  1. Elemento 1
  2. Elemento 2
  3. Elemento 3

 

 

precedente - successiva

Sito realizzato in base al template offerto da

http://www.graphixmania.it