Nella lezione precedente, abbiamo visto come cambiare il contenuto degli elementi. In questa lezione, vediamo come creare nuovi elementi HTML.
In jQuery, per creare un elemento HTML si utilizza il seguente modo:
$("<div></div>") // Oppure: $("</div>")Tuttavia, l'elemento appena creato deve essere inserito all'interno della pagina. Per questo motivo, esistono alcuni metodi jQuery specifici per questo compito (che vediamo nel paragrafo successivo).
Puoi creare un elemento che contiene un contenuto (sia testuale che HTML) in questo modo:
$("<div>Il testo va qui</div>")jQuery offre alcuni metodi predefiniti per inserire un elemento all'interno della pagina HTML:
.append() e .appendTo(), che inseriscono un elemento alla fine di ogni elemento selezionato..prepend() e .prependTo(), che inseriscono un elemento all'inizio di ogni elemento selezionato..after() e .insertAfter(), che inseriscono un elemento dopo ogni elemento selezionato..before() e .insertBefore(), che inseriscono un elemento prima di ogni elemento selezionato.I metodi .append() e .appendTo() vengono utilizzati per aggiungere un elemento o un insieme di elementi alla fine di un altro elemento o insieme di elementi.
Sintassi da utilizzare:
$(contenitore).append(elementoDaAggiungere).$(elementoDaAggiungere).appendTo(contenitore).Il parametro contenitore indica l'elemento nel quale deve essere inserito il nuovo elemento.
Il parametro elementoDaAggiungere indica l'elemento da aggiungere al contenitore.
Nota: la differenza tra .append() e .appendTo() è soltanto di tipo sintattico, in quanto i parametri sono invertiti. Il funzionamento rimane uguale. Nell'esempio successivo, utilizzeremo soltanto .append() per sintesi.
Vediamo un esempio:
<div id="testo">
<p>Lorem ipsum dolor sit amet,</p>
<p>consectetur adipiscing elit.</p>
</div>
<script>
$("#testo").append("<p>Curabitur lacinia purus et ante</p>");
</script>Nell'esempio, viene aggiunto un terzo <p> nel contenitore <div>.
I metodi .prepend() e .prependTo() vengono utilizzati per aggiungere un elemento o un insieme di elementi all'inizio di un altro elemento o insieme di elementi.
Sintassi da utilizzare:
$(contenitore).prepend(elementoDaAggiungere).$(elementoDaAggiungere).prependTo(contenitore).Il parametro contenitore indica l'elemento nel quale deve essere inserito il nuovo elemento.
Il parametro elementoDaAggiungere indica l'elemento da aggiungere al contenitore.
Nota: la differenza tra .prepend() e .prependTo() è soltanto di tipo sintattico, in quanto i parametri sono invertiti. Il funzionamento rimane uguale. Nell'esempio successivo, utilizzeremo soltanto .prepend() per sintesi.
Vediamo come funziona:
<div id="testo">
<p>consectetur adipiscing elit.</p>
<p>Curabitur lacinia purus et ante</p>
</div>
<script>
$("#testo").prepend("<p>Lorem ipsum dolor sit amet,</p>");
</script>Nell'esempio, viene aggiunto un terzo <p> all'inizio del contenitore <div>.
I metodi .after() e .insertAfter() vengono utilizzati per aggiungere un elemento o un insieme di elementi dopo un altro elemento o insieme di elementi.
Sintassi da utilizzare:
$(elemento).after(elementoDaAggiungere).$(elementoDaAggiungere).insertAfter(elemento).Il parametro elemento indica l'elemento dopo il quale deve essere inserito il nuovo elemento.
Il parametro elementoDaAggiungere indica l'elemento da aggiungere dopo l'elemento.
Nota: la differenza tra .after() e .insertAfter() è soltanto di tipo sintattico, in quanto i parametri sono invertiti. Il funzionamento rimane uguale. Nell'esempio successivo, utilizzeremo soltanto .after() per sintesi.
Ecco un esempio di come utilizzare .after():
<div>
<p>Lorem ipsum dolor sit amet,</p>
<p id="testo">consectetur adipiscing elit.</p>
</div>
<script>
$("#testo").after("<p>Curabitur lacinia purus et ante</p>");
</script>I metodi .before() e .insertBefore() vengono utilizzati per aggiungere un elemento o un insieme di elementi prima di un altro elemento o insieme di elementi.
Sintassi da utilizzare:
$(elemento).before(elementoDaAggiungere).$(elementoDaAggiungere).insertBefore(elemento).Il parametro elemento indica l'elemento prima del quale deve essere inserito il nuovo elemento.
Il parametro elementoDaAggiungere indica l'elemento da aggiungere prima dell'elemento.
Nota: la differenza tra .before() e .insertBefore() è soltanto di tipo sintattico, in quanto i parametri sono invertiti. Il funzionamento rimane uguale. Nell'esempio successivo, utilizzeremo soltanto .before() per sintesi.
Guardiamo un esempio di questo metodo:
<div>
<p id="testo">consectetur adipiscing elit.</p>
<p>Curabitur lacinia purus et ante</p>
</div>
<script>
$("#testo").before("<p>Lorem ipsum dolor sit amet,</p>");
</script>