jQuery.append(): come aggiungere elementi nell’albero DOM

Il metodo jQuery.append() facilita l’esecuzione di operazioni complesse, come la creazione di elenchi dinamici, l’aggiunta di elementi dei moduli o il caricamento di ulteriori contenuti tramite AJAX. Questo articolo descrive la sintassi e l’utilizzo del metodo.

Che cos’è il metodo jQuery.append()?

jQuery.append() è una funzione della libreria jQuery per l’inserimento dinamico di contenuti nell’albero DOM (Document Object Model). Con questo metodo puoi aggiungere nuovi elementi o strutture alla fine di un dato oggetto. Il metodo .append() di jQuery offre varie possibilità e può essere utilizzato in combinazione con altre funzioni jQuery come jQuery.removeClass() o jQuery.on(). In questo modo puoi sfruttare numerose opzioni per espandere il tuo albero DOM in modo dinamico. Particolarmente importante è anche la perfetta integrazione di jQuery in WordPress, che ti permette di implementare funzionalità speciali ed elementi interattivi nel tuo CMS.

Quali sono la sintassi e i parametri del metodo jQuery.append()?

JQuery.append() accetta due parametri:

$(selector).append(content, function(index, html));

• content: rappresenta il contenuto da aggiungere
• function(index, html): elemento richiamato dopo l’aggiunta del contenuto
  • index: l’indice dell’elemento corrente nell’insieme degli oggetti selezionati
  • html: il contenuto HTML corrente dell’elemento

Il selector può essere una qualsiasi selezione CSS valida che identifichi l’elemento di destinazione desiderato. Ad esempio, i selettori in jQuery sono gli ID (#id), le classi (.class) o i nomi degli elementi (ad esempio div).

Come content è possibile utilizzare una serie di caratteri (testo), codice HTML o un elemento DOM già esistente. Se si fornisce una serie di caratteri, la serie viene aggiunta come contenuto testuale dell’elemento. Se si utilizza il codice HTML, questo viene interpretato e inserito come nuova struttura dell’elemento. In presenza di un elemento DOM, .append() aggiunge l’elemento all’oggetto di destinazione.

Esempi di applicazione per jQuery.append()

Nelle parti seguenti ti mostriamo alcuni esempi che descrivono l’utilizzo del metodo .append() in jQuery.

HTML con jQuery.append()

L’esempio seguente mostra l’aggiunta di strutture HTML:

$("header").append("<div><p>Nuovo contenuto</p></div>");

jQuery.append() div aggiunge quindi un contenitore con un paragrafo alla fine dell’elemento header.

Elementi DOM con jQuery.append()

In modo analogo è possibile allegare gli elementi DOM:

var newElement = $("<div><p>Nuovo contenuto</p></div>");
$("header").append(newElement);

jQuery.append() con funzione callback

Una funzione callback ti permette di eseguire determinate azioni dopo l’aggiunta del contenuto oppure di accedere al nuovo elemento creato o alle sue proprietà.

$("div#container").append("<p>Primo elemento</p><p>Secondo elemento</p><p>Terzo elemento</p>", function(index, html) {
    console.log("Elemento aggiunto: " + html);
    console.log("Indice dell'elemento: " + index);
});

Il risultato è il seguente:

Elemento aggiunto: <p>Primo elemento</p>
Indice dell'elemento: 0
Elemento aggiunto: <p>Secondo elemento</p>
Indice dell'elemento: 1
Elemento aggiunto: <p>Terzo elemento</p>
Indice dell'elemento: 2

In questo esempio, l’elemento jQuery.append() allega tre tag <p> (“Primo elemento”, “Secondo elemento” e “Terzo elemento”) contemporaneamente alla fine di div con l’ID container. La funzione callback viene eseguita per ciascun oggetto aggiunto e dà come risultato sulla console il contenuto HTML del rispettivo elemento e l’indice corrispondente.