Nel processo di compilazione di un particolare modulo o questionario, ci sono spesso situazioni in cui è necessario visualizzare una particolare risposta o notifica in risposta all'opzione selezionata. Ad esempio, la gestione di domande a scelta multipla, ecc. In questi casi, la modifica del testo dell'etichetta utilizzando JavaScript è molto utile per migliorare l'accessibilità dei moduli HTML e la progettazione generale del documento.
Come modificare il testo dell'etichetta utilizzando 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: modificare il testo dell'etichetta in JavaScript utilizzando 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 modificarne il 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 restituirne il contenuto HTML.
Esempio
Esamina il seguente frammento di codice per spiegare chiaramente il concetto dichiarato:
< centro >< corpo >
< etichetta id = 'libbra' > DOM etichetta >
< fr >< fr >
< pulsante al clic = 'labelText()' > Clicca qui pulsante >
corpo > centro >
-
- Innanzitutto, all'interno del '
” tag, includi il “ etichetta ” con l'indicazione “ id ' e ' testo ' i valori. - Successivamente, crea un pulsante con un ' al clic ” evento che richiama la funzione labelText().
- Innanzitutto, all'interno del '
Ora, segui il codice JavaScript indicato di seguito:
funzione labelText ( ) {permettere get = document.getElementById ( 'libbra' )
get.innerHTML= 'Il nome abbreviato è Document Object Model' ;
}
-
- Dichiara una funzione denominata ' etichettaTesto() ”.
- Nella sua definizione, accedi all'id del ' etichetta ' usando il ' document.getElementById() ' metodo.
- Infine, applica la proprietà innerHTML e assegna un nuovo ' testo ” all'etichetta a cui si accede. 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 nel DOM che nel codice anche in “ Elementi ' sezione.
Approccio 2: modificare il testo dell'etichetta in JavaScript utilizzando la proprietà innerText
Il ' testo interno La proprietà 'restituisce il contenuto del testo dell'elemento. Questa proprietà può essere implementata per allocare un valore immesso dall'utente immesso nel campo di input al testo dell'etichetta assegnata.
Sintassi
element.innerText
Nella sintassi sopra:
-
- “ elemento ” indica l'elemento su cui verrà applicata la specifica proprietà per restituirne il contenuto testuale.
Esempio
L'esempio seguente mostra il concetto affermato:
< centro >< corpo >Inserisci un nome: < ingresso genere = 'testo' id = 'nome' valore = '' completamento automatico = 'spento' >
< p >< ingresso genere = 'pulsante' id = 'bt' valore = 'Modifica testo etichetta' al clic = 'labelText()' > p >
< etichetta id = 'libbra' > N / UN etichetta >
corpo > centro >
-
- Innanzitutto, alloca un campo di testo di input con il ' id ”. Il ' nullo Il valore qui indica che il valore verrà recuperato dall'utente e l'impostazione del completamento automatico su ' spento ” eviterà i valori suggeriti.
- Dopodiché, includi un'etichetta con il ' id ' e ' testo ' valore.
Ora nello snippet di codice JavaScript, esegui i seguenti passaggi:
funzione labelText ( ) {permettere get = document.getElementById ( 'libbra' ) ;
permettere nome = document.getElementById ( 'nome' ) .valore;
get.innerText = nome;
}
-
- Definisci una funzione denominata “ etichettaTesto() ”. Nella sua definizione, accedi all'etichetta creata utilizzando il tasto “ document.getElementById() ' metodo.
- Allo stesso modo, ripetere il passaggio precedente per accedere al campo di testo di input specificato e ottenere da esso il valore immesso dall'utente.
- Infine, assegna il valore immesso dall'utente dal passaggio precedente all'etichetta recuperata. Questo cambierà il testo dell'etichetta nel valore immesso dall'utente nel campo di testo di input.
Produzione
Nell'output di cui sopra, è evidente che il requisito desiderato è raggiunto.
Approccio 3: modificare il testo dell'etichetta in JavaScript utilizzando i metodi jQuery text() e html()
Il ' testo() Il metodo ' restituisce il contenuto testuale degli elementi selezionati. Il ' html() Il metodo ” restituisce il contenuto innerHTML degli elementi selezionati.
Sintassi
$ ( selettore ) .testo ( )
In questa sintassi:
-
- “ selettore ” punta al contenuto testuale dell'elemento a cui si accede.
Nella sintassi sopra indicata:
-
- “ selettore ” si riferisce all'innerHTML dell'elemento a cui si accede.
Esempio
Questo esempio illustrerà il concetto affermato utilizzando i metodi jQuery.
Passa attraverso lo snippet di codice indicato di seguito:
< sceneggiatura src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > sceneggiatura >< centro >< corpo >
< etichetta id = 'lb1' > Questo è il seguente sito web: etichetta >
< fr >< fr >
< etichetta id = 'libbra2' > Contenuto: etichetta >
< fr >< fr >
< pulsante al clic = 'labelText()' > Clic per Sito web pulsante >
< pulsante al clic = 'labelText2()' > Clic per Contenuto pulsante >
corpo > centro >
-
- In primo luogo, includi il ' jQuery ” libreria per applicarne i metodi.
- Successivamente, all'interno del “
', include due etichette diverse con il ' id ” e il valore del testo contro ciascuno di essi. - Inoltre, assegna pulsanti separati a ciascuna delle etichette create. Entrambi i pulsanti avranno un ' al clic ” che invoca due diverse funzioni specificate.
Ora, passa attraverso le seguenti righe di codice JavaScript:
funzione labelText ( ) {$ ( '#lbl1' ) .testo ( 'Linux' )
}
funzione labelText2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Nel primo passaggio, dichiara una funzione denominata ' etichettaTesto() ”.
- Nella sua definizione, accedi all'etichetta contro il prelevato ' id ” e applicare il “ testo() ” metodo ad esso. Ciò comporterà la modifica del valore di testo dell'etichetta nel valore specificato nel relativo parametro.
- Allo stesso modo, definisci una funzione denominata ' labelText2() ”.
- Qui, allo stesso modo, ripeti il passaggio sopra discusso per accedere all'etichetta. In questo caso, applicare il ' html() ' metodo. Anche questo metodo funzionerà allo stesso modo e restituirà il valore di testo specificato modificando così il testo dell'etichetta.
Produzione
Nell'output sopra, il primo valore di testo trasformato dell'etichetta sul Document Object Model (DOM) corrisponde a jQuery ' testo() ” metodo e l'altro è il risultato del “ html() ' metodo.
Abbiamo compilato gli approcci per modificare il testo dell'etichetta utilizzando JavaScript.
Conclusione
Il ' innerHTML ” proprietà, il “ testo interno proprietà ', o jQuery ' testo() ' e ' html() ” possono essere utilizzati per modificare il testo dell'etichetta utilizzando JavaScript. La proprietà innerHTML può essere applicata per ottenere l'etichetta specifica e modificarne il contenuto del testo in un valore di testo appena assegnato. La proprietà innerText può essere implementata per allocare un nuovo valore di testo all'etichetta a cui si accede modificandolo in tal modo. L'approccio jQuery può essere utilizzato per trasformare il valore del testo dell'etichetta con l'aiuto dei suoi due metodi ottenendo lo stesso risultato sotto forma di due diversi valori di testo allocati. Questo articolo ha dimostrato le tecniche per modificare il testo dell'etichetta utilizzando JavaScript.