Dopo avere imparato come selezionare gli oggetti con jQuery, possiamo capire come modificare il DOM usando jQuery.

Il metodo append() di jQuery consente di inserire del codice HTML all’interno dell’elemento selezionato (o degli elementi selezionati) come ultimo figlio, ossia in coda all’ultimo tag contenuto.
Il suo utilizzo è molto semplice, supponiamo ad esempio di voler aggiungere un link all’interno di del div che ha id “selDiv”, ci basterà scrivere:

$('#selDiv').append('<a href="url">Etichetta</a>')

Dopo l’esecuzione, il codice iniziale:

<div id="selDiv">
    <p>Paragrafo</p>
</div>

diventa:

<div id="selDiv">
   <p>Paragrafo</p>
   <a href="url">Etichetta</a>
</div>

Il metodo jQuery prepend() invece consente di aggiungere del nuovo codice HTML all’inizio di un elemento selezionato, ad esempio utilizzando sempre lo stesso HTML ed eseguendo:

$('#selDiv').prepend('<a href="url">Etichetta</a>');

Il risultato sarà:

<div id="selDiv">
   <a href="url">Etichetta</a>
   <p>Paragrafo</p>
</div>