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:

Dom



Clicca qui

• • 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:

N / A

• • 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:

Questo è il seguente sito Web:



Contenuto:



Fai clic per il sito Web
Fai clic per il contenuto

• • 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.