Scopri come creare un elemento in jQuery

La creazione di un nuovo elemento è una delle attività più basilari che puoi svolgere con la libreria JavaScript jQuery. Utilizzando jQuery, l'attività è molto più semplice dell'approccio equivalente con il Document Object Model (DOM). Lo troverai anche più flessibile ed espressivo, più usi jQuery.

Per servire a uno scopo, dovrai essere in grado di aggiungere il tuo elemento a una pagina web. Scopri come aggiungere un nuovo elemento dell'elenco o sostituire un paragrafo con un nuovo contenuto utilizzando jQuery.

Che cos'è jQuery?

La libreria jQuery è una raccolta di JavaScript codice con due obiettivi primari:

Semplifica le operazioni JavaScript comuni.
Gestisce i problemi JavaScript di compatibilità incrociata tra vari browser.

Il secondo obiettivo si occupa dei bug, ma affronta anche le differenze di implementazione tra i browser. Entrambi gli obiettivi sono meno necessari di un tempo, poiché i browser migliorano nel tempo. Ma jQuery può ancora essere uno strumento prezioso.

Che cos'è un elemento?

Un elemento è talvolta indicato come tag. Sebbene i due siano spesso usati in modo intercambiabile, c'è una sottile differenza. Un tag si riferisce al letterale

includi in un file HTML per contrassegnare il contenuto del testo. Un elemento è l'oggetto dietro le quinte che rappresenta il testo contrassegnato. Pensa a un elemento come la controparte DOM dei tag HTML.

Come creare un nuovo elemento usando jQuery

Come la maggior parte delle operazioni jQuery, la creazione di un elemento inizia con la funzione dollaro, $ () . Questa è una scorciatoia per il nucleo jQuery() funzione. Questa funzione ha tre scopi distinti, esso:

Corrisponde agli elementi, di solito quelli che esistono già nel documento
Crea nuovi elementi
Esegue una funzione di callback quando il DOM è pronto

Quando passi una stringa contenente HTML come primo parametro, questa funzione creerà un nuovo elemento:

$(' ')

Questo restituisce uno speciale oggetto jQuery che contiene una raccolta di elementi. In questo caso, c'è un singolo oggetto che rappresenta un elemento 'a' che abbiamo appena creato.

che riparano gli schermi dell'iPhone a buon mercato?

La stringa deve essere simile all'HTML per distinguere questa azione dagli elementi corrispondenti. In pratica, questo significa che la stringa deve iniziare con a < . Non è possibile aggiungere testo normale al documento utilizzando questo metodo.

È importante capire che questo non aggiunge l'elemento al tuo documento, ma crea solo un nuovo elemento pronto per l'aggiunta. L'elemento è 'slegato', occupando memoria ma non fa ancora parte della pagina finale.

Aggiungere HTML più complesso

La funzione dollaro può effettivamente creare più di un elemento. In effetti, può creare qualsiasi albero di elementi HTML che desideri:

$('one
two
three
')

Puoi anche utilizzare questo formato per creare un elemento con attributi:

$(' ')

Come impostare gli attributi su un nuovo elemento

Puoi creare un nuovo elemento jQuery e impostarne gli attributi senza dover creare tu stesso la stringa HTML completa. Questo è utile se stai generando valori di attributo in modo dinamico. Per esempio:

photo = new Date().getHours() > 12 ? 'afternoon.jpg' : 'morning.jpg';  
$(' ', { src: photo });

Come aggiungere un elemento

Dopo aver creato un nuovo elemento, puoi aggiungerlo al documento in diversi modi. La documentazione di jQuery raccoglie questi metodi insieme sotto il categoria 'manipolazione' .

Aggiungi come figlio di un elemento esistente

$('body').append($('Hello, world
'));  
$(document.body).append($el);

È possibile utilizzare questo metodo, ad esempio, per aggiungere una nuova voce di elenco alla fine di un elenco.

Aggiungilo come fratello di un elemento esistente

$('p.last').after('A new paragraph
')  
$('ul li:first').before('new item
')

Questa è una buona scelta se, ad esempio, vuoi aggiungere un nuovo paragrafo nel mezzo di altri due.

Sostituisci un elemento esistente

Puoi scambiare un elemento esistente con uno appena creato usando il pulsante sostituirlo con() metodo:

$('#old').replaceWith('New paragraph
');

Avvolgere un elemento esistente

Questo è un caso d'uso piuttosto raro, ma potresti voler racchiudere un elemento esistente in uno nuovo. Ad esempio, potresti avere un codice elemento che vuoi avvolgere in a per :

$('code#n1').wrap('

')

Accesso all'elemento che hai creato

Il $ () la funzione restituisce un oggetto jQuery. Questo è utile per le operazioni di follow-up:

$el = $('p'); $('body').append($el);

Si noti che, per convenzione, i programmatori jQuery spesso denominano le variabili jQuery con un segno di dollaro iniziale. Questo è semplicemente uno schema di denominazione e non è direttamente correlato al $ () funzione.

Creazione di elementi utilizzando jQuery

Sebbene sia possibile manipolare il DOM utilizzando le funzioni JavaScript native, jQuery lo rende molto più semplice. È ancora molto utile avere una buona comprensione del DOM, ma jQuery rende molto più piacevole lavorarci.

Condividere Condividere Tweet E-mail L'eroe nascosto dei siti web: Capire il DOM

Stai imparando il web design e hai bisogno di saperne di più sul Document Object Model? Ecco cosa devi sapere sul DOM.

Leggi Avanti Argomenti correlati

Programmazione
Sviluppo web
jQuery

Circa l'autore Bobby Jack(58 articoli pubblicati)

Bobby è un appassionato di tecnologia che ha lavorato come sviluppatore software per quasi due decenni. È appassionato di giochi, lavora come editor di recensioni presso Switch Player Magazine ed è immerso in tutti gli aspetti dell'editoria online e dello sviluppo web.

Altro da Bobby Jack

Iscriviti alla nostra Newsletter

Iscriviti alla nostra newsletter per suggerimenti tecnici, recensioni, ebook gratuiti e offerte esclusive!

Clicca qui per iscriverti