Metodo HTML Javascript

| | | | | | | | | | | | | | | | | | | | | | | | | | | | | |

jQuery ha molti metodi disponibili per aiutare gli sviluppatori a creare in modo efficiente un’esperienza web dinamica. Il metodo jQuery html() sostituisce tutto l’HTML all’interno dell’elemento selezionato. Questo è utile se vuoi cambiare dinamicamente ciò che l’utente sta vedendo dopo aver interagito con la pagina.

In questa guida impareremo come usare html() e la sua sintassi. Daremo anche un’occhiata a un approccio passo passo per usare html(). jQuery html() è un metodo fondamentale nella libreria jQuery ed è spesso utilizzato. Dopo aver appreso le basi, sarai pronto per iniziare a fare pratica con html().

Cos’è jQuery html()?

jQuery html () imposta il contenuto HTML di ogni elemento in un insieme di elementi abbinati. è necessario prestare attenzione per fornire una query sufficientemente specifica per sostituire solo l’HTML desiderato.

Solo il contenuto viene modificato con html(). Se è presente un foglio di stile, il nuovo contenuto avrà lo stesso stile del contenuto precedente. Vale anche la pena ricordare che html() funziona solo su un documento HTML ‚Äî non funziona con XML.

html() Sintassi jQuery

Ricorda che i metodi jQuery vengono chiamati prima su un selettore. Il selettore può essere ampio quanto un

tag o specifico come ). Una volta selezionato l’elemento desiderato, possiamo chiamare html() e passare una stringa HTML come parametro a html(). Per una spiegazione approfondita dei selettori CSS, fare riferimento alla nostra guida.

html() accetta una stringa letterale come parametro o una variabile contenente la stringa. Passando una stringa letterale di "Nuovo contenuto" renderà come passare una variabile che fa riferimento a "Nuovo contenuto.

Supponiamo che abbiamo questo semplice

Possiamo sostituire il intero tag

:

Il codice sopra mostra il nuovo HTML come:

Se ci fosse stato uno stile associato all’originale

tag, non sarebbe più attivo con il nuovo contenuto. è anche possibile passare una semplice stringa:

Il nostro codice HTML ora è il seguente:

Possiamo notare che ci sono alcune differenze nel nuovo contenuto. Passare una stringa letterale è un ottimo modo per mantenere lo stile del contenuto precedente. Ricorda, una stringa letterale è semplicemente una stringa contenente caratteri. Se il nuovo contenuto deve essere un elemento figlio, l’utilizzo di una stringa HTML consente di farlo.

Ora che la sintassi di base è stata trattata, diamo un’occhiata a un esempio. < /p>

esempio jQuery html()

Abbiamo visto come html() sostituisce il contenuto all’interno dell’elemento selezionato nel nostro "Nuovo contenuto" esempio. Ciò può essere ottenuto passando una stringa letterale o una stringa HTML come parametro. Diamo un’occhiata a un esempio in cui manteniamo lo stile originale.

Guardando la nostra pagina HTML iniziale, vedremo solo la parola "Hello" ha uno stile con il colore blu.

In questo esempio, vogliamo sostituire la parola "Hello" con nuovi contenuti, ma conservano lo stile originale. Per fare ciò, selezioniamo il paragrafo con il nome della classe blu.

Abbiamo selezionato il paragrafo appartenente alla classe blue e sostituito "Hello" con "Ciao ANCORA." Poiché html() sostituisce il contenuto racchiuso nei nomi degli elementi, il colore blu rimarrà.

A83aaFCGA71IBKWgL4WyaFqn GeP4fN7kwWBtZnN4Xmhk9dfSP85teVs83FA2w8myG0SsPwzmfMP8RagLyBGr0JCb8XgEpQ88AFUpD 5iatEp Im3xzfqRKD35rOb9xjhLoN1Na

E se volessimo sostituire tutto il testo del paragrafo? Se selezioniamo l’elemento

, questo sostituirà il testo sopra con tre istanze di "Hello AGAIN."

Qui noi stanno selezionando tutti i tag di paragrafo nel file HTML e sostituendo il contenuto di ognuno con "Hello AGAIN". Come il nostro primo esempio, lo stile originale verrà visualizzato perché stiamo immissione di contenuti avvolto in questi tag. 2guefy2uVdRQb3zbHpmF0SeFtMBttoqGZfEwZJn0nS04IulS0SYHM8Q Ddxef0zLi8sxC1Lt4N3 HIOZpbIRtU1eFIP0y8qbPJcTc1kvB4Pc5Ti1CUpWDSZktp3v6zyCo7fIavTM

Proprio come ci aspettavamo. Saliamo di un livello nel nostro selettore al nostro JXF9suUYnrtQvrU 8sIs3 NEA0BBS2hKkyRaigcZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XgT Ol64YUdUPWEKZYgZX26RHBcDZ376i87EpwGAsBEBYNaIjVUs FAsrMupPlC9CduIwFUCCBGj XgT Ol64YUdUPWEKZYXX6D ha i nostri elementi></p. Sapendo come funziona <code>html()</code>, possiamo dedurre che il codice sopra sostituirà i tre <p>tag con quello passato come parametro. Leggi la nostra <a href=guida sull’apprendimento dell’HTML per approfondire il concetto di cui sopra

In una riga di codice, abbiamo sostituito tre diversi elementi di paragrafo e abbiamo utilizzato il nostro stile di classe originale.

Conclusione

jQuery html() è un metodo comunemente usato per sostituire il contenuto delle pagine HTML per creare un’esperienza dinamica. Poiché html() sostituisce il contenuto racchiuso all’interno di elementi HTML, è importante prestare attenzione ai selettori jQuery e alle classi di stile. Ciò impedirà qualsiasi modifica di stile indesiderata.

Abbiamo appreso cos’è jQuery, la sua sintassi e un esempio di come può essere utilizzato. Dedica un po’ di tempo a esercitarti e ad arrivare a questo metodo ampiamente utilizzato.