JQuery, una biblioteca di JavaScript, fa numerose attività di programmazione web estremamente facile da svolgere. Le attività che normalmente richiederebbero più righe di codice per essere raggiunte come la gestione degli eventi, le animazioni o l'Ajax, possono essere svolte in una sola riga di codice. Oltre a questi compiti, è possibile aggiungere elementi HTML con grande facilità utilizzando più metodi forniti in jQuery.

Questa guida ti insegnerà come aggiungere elementi HTML tramite jQuery usando diversi metodi con l'aiuto di esempi appropriati.

Come aggiungere elementi HTML tramite jQuery

JQuery fornisce i seguenti quattro metodi per aggiungere elementi HTML.

1. aggiungere()
2. prepara ()
3. Prima()
4. Dopo()

Qui abbiamo discusso di tutti questi in dettaglio.

Metodo Append ()

Il metodo Append () aggiunge un elemento come figlio all'interno di un elemento specificato. Prende un numero illimitato di nuovi elementi HTML sotto forma di parametri.

Questo metodo funziona in modo tale che gli elementi HTML vengano generati utilizzando text/html, jQuery o javascript. Successivamente, quegli elementi di nuova generazione vengono aggiunti come l'ultimo bambino utilizzando il metodo Append ().

Esempio

Supponiamo di voler aggiungere nuovi elementi alla fine di un elenco ordinato utilizzando il metodo Append (). Usa il seguente codice.

Html

1. Articolo


2. Articolo


3. Articolo

Nel codice sopra, abbiamo creato un pulsante e creato anche un elenco ordinato.

jQuery

Utilizzando il metodo JQuery Append () aggiungeremo un altro elemento all'elenco facendo clic sul pulsante.

Produzione

C'erano tre elementi nell'elenco, inizialmente.

Supponiamo di fare clic sul pulsante tre volte.

Altri tre elementi vengono aggiunti all'elenco.

Metodo prepara ()

Questo metodo funziona in modo simile a quello del metodo Append () con l'unica differenza che invece di aggiungere gli elementi HTML appena creati, prevederà gli elementi come il primo figlio. Prende anche un numero illimitato di nuovi elementi HTML sotto forma di parametri.

Esempio

Useremo lo stesso esempio di sopra e vedremo come funziona il metodo prepara ().

jQuery

Nello snippet di codice sopra, stiamo usando il metodo prepara () per aggiungere elementi all'inizio dell'elenco ordinato.

Produzione

Inizialmente c'erano tre elementi nella lista.

Supponiamo di fare clic sul pulsante due volte.

All'inizio dell'elenco ordinato vengono aggiunti due elementi.

Metodo prima ()

Il metodo prima () prende un numero illimitato di nuovi elementi HTML sotto forma di parametri. Questo metodo funziona in modo tale che gli elementi HTML vengano generati usando text/html, jQuery o javascript e vengono aggiunti prima di un elemento già esistente come fratello.

Esempio

Supponiamo di voler aggiungere un'intestazione prima di un paragrafo facendo clic su un pulsante. Questo può essere fatto usando il metodo prima ().

Html

Qualche paragrafo.

Nel codice sopra che abbiamo creato

, ed elementi. Ora useremo il metodo prima () per aggiungere un'intestazione prima del paragrafo.

jQuery

Produzione

Il metodo prima () funziona correttamente

dopo () metodo

Questo metodo prende un numero illimitato di nuovi elementi HTML sotto forma di parametri. Questo metodo funziona in modo simile a quello del metodo prima () con l'unica differenza è che i nuovi elementi HTML vengono aggiunti come un fratello ma dopo gli elementi già esistenti.

Esempio

Supponiamo di voler aggiungere un paragrafo dopo un'intestazione facendo clic su un pulsante. Questo può essere fatto usando il metodo After ().

Html

Intestazione

Nel codice sopra che abbiamo creato

, ed elementi e usando il metodo dopo () un paragrafo verrà aggiunto dopo l'intestazione.

jQuery

Produzione

Ha aggiunto con successo un paragrafo dopo l'intestazione.

Conclusione

Gli elementi HTML possono essere aggiunti utilizzando vari metodi forniti da jQuery come append (), prepend (), prima () e dopo (). Tutti questi metodi prendono un numero illimitato di nuovi elementi HTML sotto forma di parametri e una volta generati gli elementi vengono aggiunti alle loro posizioni appropriate rispetto al metodo utilizzato. Tutti questi metodi sono discussi in modo approfondito in questa guida, insieme a esempi pertinenti.