jQuery.append(): come ag­giun­ge­re elementi nell’albero DOM

Il metodo jQuery.append() facilita l’ese­cu­zio­ne di ope­ra­zio­ni complesse, come la creazione di elenchi dinamici, l’aggiunta di elementi dei moduli o il ca­ri­ca­men­to 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’in­se­ri­men­to dinamico di contenuti nell’albero DOM (Document Object Model). Con questo metodo puoi ag­giun­ge­re nuovi elementi o strutture alla fine di un dato oggetto. Il metodo .append() di jQuery offre varie pos­si­bi­li­tà e può essere uti­liz­za­to in com­bi­na­zio­ne con altre funzioni jQuery come jQuery.re­mo­ve­Class() o jQuery.on(). In questo modo puoi sfruttare numerose opzioni per espandere il tuo albero DOM in modo dinamico. Par­ti­co­lar­men­te im­por­tan­te è anche la perfetta in­te­gra­zio­ne di jQuery in WordPress, che ti permette di im­ple­men­ta­re fun­zio­na­li­tà speciali ed elementi in­te­rat­ti­vi 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: rap­pre­sen­ta il contenuto da ag­giun­ge­re
• function(index, html): elemento ri­chia­ma­to dopo l’aggiunta del contenuto
  • index: l’indice dell’elemento corrente nell’insieme degli oggetti se­le­zio­na­ti
  • html: il contenuto HTML corrente dell’elemento

Il selector può essere una qualsiasi selezione CSS valida che iden­ti­fi­chi l’elemento di de­sti­na­zio­ne de­si­de­ra­to. Ad esempio, i selettori in jQuery sono gli ID (#id), le classi (.class) o i nomi degli elementi (ad esempio div).

Come content è possibile uti­liz­za­re 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 in­ter­pre­ta­to e inserito come nuova struttura dell’elemento. In presenza di un elemento DOM, .append() aggiunge l’elemento all’oggetto di de­sti­na­zio­ne.

Esempi di ap­pli­ca­zio­ne per jQuery.append()

Nelle parti seguenti ti mostriamo alcuni esempi che de­scri­vo­no 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 con­te­ni­to­re 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 de­ter­mi­na­te 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”) con­tem­po­ra­nea­men­te 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 ri­spet­ti­vo elemento e l’indice cor­ri­spon­den­te.