Come modificare il testo dell'etichetta usando JavaScript
Nel processo di compilazione di una forma particolare o di un questionario, ci sono spesso situazioni in cui è necessario visualizzare una risposta o una notifica particolare in risposta all'opzione selezionata. Ad esempio, affrontando domande a scelta multipla, ecc. In tali casi, modificare il testo dell'etichetta usando JavaScript è molto utile per migliorare l'accessibilità dei moduli HTML e la progettazione complessiva del documento.
Come modificare il testo dell'etichetta usando JavaScript?
I seguenti approcci possono essere utilizzati per modificare il testo dell'etichetta in JavaScript:
-
- "Innerhtml" proprietà.
- "testo interno" proprietà.
- jQuery "testo()" E "html ()"Metodi.
Approccio 1: modifica il testo dell'etichetta in JavaScript usando la proprietà InnerHTML
IL "Innerhtml"La proprietà restituisce il contenuto HTML interno di un elemento. Questa proprietà può essere utilizzata per recuperare l'etichetta specifica e modificare il suo testo in un valore di testo appena assegnato.
Sintassi
elemento.Innerhtml
Nella sintassi sopra:
-
- "elemento"Si riferisce all'elemento su cui verrà applicata la proprietà specifica per restituire il suo contenuto HTML.
Esempio
Passa attraverso il seguente frammento di codice per spiegare chiaramente il concetto dichiarato:
-
- Innanzitutto, all'interno del "Tag, includi il "etichetta"Con il specificato"id" E "testo" valori.
- Successivamente, crea un pulsante con un allegato "al clic"Evento che invoca la funzione etichettate ().
Ora, segui il codice JavaScript di seguito:
funzione etichettatext ()
Sia get = document.getElementById ('lbl')
Ottenere.InnerHtml = "Il nome abbreviato è modello di oggetti documenti";
-
- Dichiarare una funzione denominata "LabelText ()".
- Nella sua definizione, accedi all'ID del specificato "etichetta" usando il "documento.getElementById ()" metodo.
- Infine, applica la proprietà InnerHTML e assegna un nuovo "testo"Valore all'etichetta accessibile. Ciò comporterà la trasformazione del testo dell'etichetta in un nuovo valore di testo al clic del pulsante.
Produzione
Nell'output sopra, si può osservare che il valore di testo di "etichetta"Viene modificato sia sul DOM che nel codice anche in"Elementi" sezione.
Approccio 2: modifica il testo dell'etichetta in JavaScript usando la proprietà InnerText
IL "testo interno"La proprietà restituisce il contenuto di testo dell'elemento. Questa proprietà può essere implementata per allocare un valore di input utente immesso nel campo di input nel testo dell'etichetta assegnata.
Sintassi
elemento.testo interno
Nella sintassi sopra:
-
- "elemento"Indica l'elemento su cui verrà applicata la proprietà specifica per restituire il suo contenuto testuale.
Esempio
Il seguente esempio dimostra il concetto dichiarato:
Immettere un nome:
-
- Innanzitutto, allocare un campo di testo di input con il specificato "id". IL "nullo"Il valore qui indica che il valore verrà recuperato dall'utente e l'impostazione del completamento automatico a"spento"Eviterà i valori suggeriti.
- Successivamente, includi un'etichetta che ha il specificato "id" E "testo" valore.
Ora nello snippet del codice JavaScript, eseguire i seguenti passaggi:
funzione etichettatext ()
Sia get = document.getElementById ('lbl');
Sia il nome = documento.getElementById ('name').valore;
Ottenere.InnerText = name;
-
- Definire una funzione chiamata "LabelText ()". Nella sua definizione, accedi all'etichetta creata usando il "documento.getElementById ()" metodo.
- Allo stesso modo, ripeti il passaggio sopra per accedere al campo di testo di input specificato e ottenere il valore inserito dall'utente da esso.
- Infine, assegnare il valore inserito dall'utente dal passaggio precedente all'etichetta recuperata. Questo cambierà il testo dell'etichetta in valore inserito dall'utente nel campo di testo di input.
Produzione
Nell'output di cui sopra, è evidente che si ottiene il requisito desiderato.
Approccio 3: modifica il testo dell'etichetta in JavaScript utilizzando i metodi JQuery Text () e HTML ()
IL "testo()"Il metodo restituisce il contenuto di testo degli elementi selezionati.IL "html ()"Il metodo restituisce il contenuto di InnerHTML degli elementi selezionati.
Sintassi
$ (selettore).testo()
In questa sintassi:
-
- "selettore"Indica il contenuto di testo dell'elemento accessibile.
$ (selettore).html ()
Nella sintassi sopra data:
-
- "selettore"Si riferisce all'internhtml dell'elemento accessibile.
Esempio
Questo esempio illustrerà il concetto dichiarato usando i metodi jQuery.
Passa attraverso lo snippet di codice di seguito:
-
- In primo luogo, includi il "jQuery"Biblioteca per applicare i suoi metodi.
- Dopodiché, all'interno del ""Tag, includi due diverse etichette con il specificato"id"E il valore di testo contro ciascuno di essi.
- Inoltre, allocare pulsanti separati a ciascuna delle etichette create. Entrambi i pulsanti avranno un allegato "al clic"Evento che invoca due diverse funzioni specificate.
Ora, passa attraverso le seguenti righe di codice JavaScript:
funzione etichettatext ()
$ ('#lbl1').Testo ("LinuxHint")
funzione etichettatext2 ()
$ ('#lbl2').HTML ("JavaScript")
-
- Nel primo passaggio, dichiarare una funzione chiamata "LabelText ()".
- Nella sua definizione, accedi all'etichetta contro il recupero "id"E applicare il"testo()"Metodo ad esso. Ciò comporterà la modifica del valore di testo dell'etichetta sul valore specificato nel suo parametro.
- Allo stesso modo, definisci una funzione chiamata "etichette2 ()".
- Qui, allo stesso modo, ripeti il passaggio sopra disclusivo per accedere all'etichetta. In questo caso, applica il “html ()" metodo. Questo metodo funzionerà anche allo stesso modo e restituirà il valore di testo specificato modificando così il testo dell'etichetta.
Produzione
Nell'output di cui sopra, il primo valore di testo trasformato dell'etichetta sul modello di oggetto document (DOM) corrisponde al jQuery "testo()"Metodo e l'altro è il risultato del"html ()" metodo.
Abbiamo compilato gli approcci per modificare il testo dell'etichetta usando JavaScript.
Conclusione
IL "Innerhtml"Proprietà, la"testo interno"Proprietà o JQuery"testo()" E "html ()"I metodi possono essere utilizzati per modificare il testo dell'etichetta usando JavaScript. La proprietà InnerHTML può essere applicata per ottenere l'etichetta specifica e modificare il suo contenuto di testo in un valore di testo appena assegnato. La proprietà InnerText può essere implementata per allocare un nuovo valore di testo all'etichetta accessibile modificandolo così. L'approccio jQuery può essere utilizzato per trasformare il valore di testo dell'etichetta con l'aiuto dei suoi due metodi con conseguente stesso risultato sotto forma di due diversi valori di testo allocati. Questo articolo ha dimostrato le tecniche per modificare il testo dell'etichetta usando JavaScript.