Aggiunta di elementi jQuery

Con jQuery, è facile aggiungere nuovi elementi/contenuti.

Aggiunta di nuovo contenuto HTML

Studieremo quattro metodi di jQuery utilizzati per aggiungere nuovi contenuti:

  • append() - Inserimento di contenuti alla fine dell'elemento selezionato
  • prepend() - Inserimento di contenuti all'inizio dell'elemento selezionato
  • after() - Inserimento di contenuti dopo l'elemento selezionato
  • before() - Inserimento di contenuti prima dell'elemento selezionato

Il metodo append() di jQuery

Il metodo append() di jQuery inserisce contenuti alla fine dell'elemento selezionato.

Esempio

$("p").append("Testo aggiunto alla fine.");

Prova tu stesso

Il metodo prepend() di jQuery

Il metodo prepend() di jQuery inserisce contenuti all'inizio dell'elemento selezionato.

Esempio

$("p").prepend("Testo aggiunto inizialmente.");

Prova tu stesso

Aggiunta di vari nuovi elementi tramite append() e prepend()

Nell'esempio sopra, abbiamo inserito testo/HTML solo all'inizio/fine dell'elemento selezionato.

Tuttavia, i metodi append() e prepend() possono accettare un numero infinito di nuovi elementi. È possibile generare testo/HTML con jQuery (come nell'esempio sopra), o tramite codice JavaScript e elementi DOM.

Nel seguente esempio, creiamo diversi nuovi elementi. Questi elementi possono essere creati tramite text/HTML, jQuery o JavaScript/DOM. Poi aggiungiamo questi nuovi elementi al testo utilizzando il metodo append() (è efficace anche per prepend()):

Esempio

function appendText()
{
var txt1="<p>Testo.</p>";               // Con HTML viene creato un nuovo elemento
var txt2=$("<p></p>").text("Testo.");   // Con jQuery viene creato un nuovo elemento
var txt3=document.createElement("p");  // Crea un nuovo elemento tramite DOM
txt3.innerHTML="Testo.";
$("p").append(txt1,txt2,txt3);         // Aggiungi nuovi elementi
{}

Prova tu stesso

Metodi after() e before() di jQuery

Il metodo after() di jQuery inserisce contenuti dopo l'elemento selezionato.

Il metodo before() di jQuery inserisce contenuti prima dell'elemento selezionato.

Esempio

$("img").after("Qualsiasi testo dopo");
$("img").before("Qualsiasi testo prima");

Prova tu stesso

Aggiungi nuovi elementi tramite i metodi after() e before()

Il metodo after() e before() possono accettare un numero illimitato di nuovi elementi come parametri. Questi elementi possono essere creati tramite text/HTML, jQuery o JavaScript/DOM.

Nell'esempio seguente, creiamo diversi nuovi elementi. Questi elementi possono essere creati tramite text/HTML, jQuery o JavaScript/DOM. Poi li inseriamo nel testo utilizzando il metodo after() (lo stesso vale per il metodo before()):

Esempio

function afterText()
{
var txt1="<b>I </b>";                    // Crea un nuovo elemento con HTML
var txt2=$("<i></i>").text("amore ");     // Crea un nuovo elemento tramite jQuery
var txt3=document.createElement("big");  // Crea un nuovo elemento tramite DOM
txt3.innerHTML="jQuery!";
$("img").after(txt1,txt2,txt3);          // Inserisci nuovi elementi dopo img
{}

Prova tu stesso

Manuale di riferimento jQuery HTML

Per una guida completa sui metodi HTML di jQuery, visitare il seguente manuale di riferimento: