Ottieni e imposta il testo interno degli elementi HTML in jQuery
Questo articolo discuterà della procedura a Ottenere E Imposta il testo interno Di Elementi HTML In jQuery. Inoltre, verranno forniti gli esempi relativi ai metodi html (), text () e val () per ottenere e impostare elementi HTML. Quindi iniziamo!
Ottieni e imposta il testo interno di elementi HTML in jQuery usando il metodo HTML ()
Il metodo javascript html () viene utilizzato per ottenere e impostare il traffico interno o il contenuto degli elementi HTML in jQuery. Questo metodo restituisce il contenuto del primo elemento HTML abbinato se lo si utilizza per ottenere il testo interno; Durante l'impostazione del testo interno, sovrascrive il contenuto di tutti gli elementi HTML che vengono abbinati.
Sintassi del metodo html ()
Per ottenere il testo interiore degli elementi HTML:
$ (selettore).html ()Per ottenere e impostare il testo interno di elementi HTML:
$ (selettore).HTML (valore)Per ottenere e impostare il testo interno di elementi HTML utilizzando una funzione:
$ (selettore).HTML (funzione (indice, corrente))Nella sintassi sopra offerta, "valore"È il contenuto che si desidera aggiungere come testo interno modificato di elementi HTML,"indice"Viene aggiunto per restituire la posizione dell'indice nel set di elementi HTML, infine,"valore corrente"Viene aggiunto per recuperare il testo interno corrente di un elemento HTML specifico.
Esempio: ottenere e impostare il testo interno degli elementi HTML in jQuery () usando il metodo HTML ()
Nell'esempio seguente, cambieremo il testo interno di tutti i paragrafi che vengono aggiunti come elementi HTML con il
etichetta. Per farlo, scriveremo il seguente codice nel nostro "indice.html" file:
Questo è il primo paragrafo.
Questo è il secondo paragrafo.
Per manipolare gli elementi HTML in jQuery, dobbiamo scrivere il codice desiderato all'interno del corpo del $ (documento).pronto() Metodo, in un file JavaScript. Qui, lo specificheremo sul "clic"Evento del nostro"pulsante", L'interprete selezionerà tutto"P"Elementi e impostare i loro contenuti sulla stringa specificata in"html ()" metodo:
$ (documento).ready (function ()$ ("pulsante").Click (function ()
$ ("p").html ("Questo è Linuxhint.com");
);
);
Dopo aver salvato il codice fornito in entrambi i file, apriremo "indice.html"Con l'aiuto del codice VS"Server epatico":
Ora, faremo clic su "Cambia il contenuto di elementi"Pulsante che è evidenziato nell'output:
Questa azione riceverà tutti gli elementi del paragrafo HTML e imposterà il loro testo interiore come segue:
Ottieni e imposta il testo interno degli elementi HTML usando il metodo text ()
Entrambi i metodi TEXT () e HTML () sono utilizzati in jQuery per ottenere e impostare gli elementi HTML Testo interno. Tuttavia, quando si utilizza il testo() Metodo per ottenere il contenuto di elementi HTML, rimuove il markup HTML dopo aver recuperato gli elementi abbinati. Quindi, se si desidera ottenere testo, impostare il testo e il markup HTML degli elementi contemporaneamente, quindi scegli l'esecuzione del metodo HTML (); Altrimenti, il metodo text () ti ha coperto.
Sintassi di text () metodo
Per ottenere il contenuto degli elementi HTML:
$ (selettore).testo()Per ottenere e impostare il contenuto di elementi HTML:
$ (selettore).Testo (valore)Per ottenere e impostare il contenuto di elementi HTML utilizzando una funzione:
$ (selettore).Testo (funzione (indice, CurrentValue))Qui, "valore"È il contenuto che si desidera impostare come testo di elementi HTML,"indice"Viene aggiunto per restituire la posizione dell'indice nel set di elementi HTML, infine,"valore corrente"Viene aggiunto per recuperare il contenuto corrente di un elemento HTML specifico.
Esempio: ottenere e impostare il testo interno degli elementi HTML usando il metodo text ()
Ora eseguiremo il precedente esempio dato con l'aiuto di "testo()"Metodo per ottenere e impostare il testo di tutti"P"Elementi HTML. Ecco il codice che abbiamo aggiunto in "indice.html" file:
Questo è il primo paragrafo.
Questo è il secondo paragrafo.
Nel nostro "il mio progetto.js"File, invoceremo il"testo()"Metodo per impostare il testo interno di tutti gli elementi di paragrafo su"Questo è Linuxhint.com":
$ (documento).ready (function ()$ ("pulsante").Click (function ()
$ ("p").testo ("Questo è Linuxhint.com ");
);
);
Clicking su "Imposta il contenutoIl pulsante cambierà il testo degli elementi del paragrafo aggiunto in "Questo è Linuxhint.com":
Ottieni e imposta il testo interno di elementi HTML nel metodo Val ()
Quando aggiungi elementi del modulo HTML nell'applicazione, puoi utilizzare "Val ()"Metodo per ottenere e impostare il valore dell'attributo degli elementi HTML specificati. Restituisce l'attributo del primo elemento HTML abbinato quando viene invocato per ottenere un valore e in caso di impostazione del valore dell'attributo, cambia il valore dell'attributo per tutti gli elementi HTML abbinati.
Sintassi del metodo Val ()
Per ottenere il valore dell'attributo degli elementi HTML:
$ (selettore).Val ()Per ottenere e impostare il valore degli attributi degli elementi HTML:
$ (selettore).Val (valore)Per ottenere e impostare il valore degli attributi degli elementi HTML utilizzando una funzione:
$ (selettore).val (funzione (indice, corrente))Nella sintassi sopra offerta, "valore"È il valore specificato che si desidera modificare per un attributo dell'elemento HTML,"indice"Viene aggiunto per restituire la posizione dell'indice nel set di elementi HTML, infine,"valore corrente"Viene aggiunto per recuperare il valore dell'attributo corrente dell'elemento HTML selezionato.
Esempio: ottenere e impostare il testo interno di elementi HTML nel metodo Val ()
L'esempio seguente cambierà il valore dell'attributo di "Campo di inserimento"Che viene aggiunto nel nostro"indice.html" file:
Nome:
A tale scopo, utilizzeremo il "il mio progetto.js"File per impostare il suo valore su"Questo è Linuxhint.com"Usando il metodo Val ():
$ (documento).ready (function ()$ ("pulsante").Click (function ()
$ ("Input: testo").Val ("Questo è Linuxhint.com ");
);
);
Faremo clic su "Imposta il valorePulsante "e la stringa"Questo è Linuxhint.com"Sarà impostato nel campo di input:
L'output di cui sopra dichiara che abbiamo impostato correttamente il valore del campo di input aggiunto.
Conclusione
Gli html (), il testo () e il val () sono i metodi più utili che possono essere utilizzati per ottenere e impostare il testo interno degli elementi HTML in jQuery. Il metodo text () ottiene e imposta il contenuto di elementi HTML mentre il metodo HTML () imposta anche il suo markup HTML. È inoltre possibile invocare il metodo HTML Val () per la modifica dei valori degli attributi. Questo articolo ha discusso dei metodi per ottenere e impostare il testo interiore degli elementi HTML in jQuery fornendo esempi appropriati.