Konkrētas veidlapas vai anketas aizpildīšanas procesā bieži rodas situācijas, kad, atbildot uz izvēlēto opciju, ir jāparāda konkrēta atbilde vai paziņojums. Piemēram, jautājumu risināšana ar atbilžu variantiem utt. Šādos gadījumos etiķetes teksta maiņa, izmantojot JavaScript, ir ļoti noderīga, lai uzlabotu HTML veidlapu pieejamību un kopējo dokumenta dizainu.
Kā mainīt etiķetes tekstu, izmantojot JavaScript?
Lai mainītu etiķetes tekstu JavaScript, var izmantot šādas pieejas:
-
- ' innerHTML ” īpašums.
- ' iekšējaisTeksts ” īpašums.
- jQuery' teksts () ' un ' html() ' metodes.
1. pieeja: mainiet etiķetes tekstu JavaScript, izmantojot iekšējo HTML rekvizītu
' innerHTML ” rekvizīts atgriež elementa iekšējo HTML saturu. Šo rekvizītu var izmantot, lai iegūtu konkrēto etiķeti un mainītu tās tekstu uz tikko piešķirtu teksta vērtību.
Sintakse
elements.innerHTML
Iepriekš minētajā sintaksē:
-
- ' elements ” attiecas uz elementu, kuram tiks lietots konkrētais rekvizīts, lai atgrieztu tā HTML saturu.
Piemērs
Izlasiet šo koda fragmentu, lai skaidri izskaidrotu norādīto jēdzienu:
< centrs >< ķermeni >
< etiķete id = 'lbl' > DOM etiķete >
< br >< br >
< pogu onclick = 'labelText()' > Noklikšķiniet šeit pogu >
ķermeni > centrs >
-
- Pirmkārt, sadaļā “
' tagu, iekļaujiet ' etiķete ' ar norādīto ' id ' un ' tekstu ” vērtības. - Pēc tam izveidojiet pogu ar pievienotu ' onclick ” notikums, kas izsauc funkciju labelText().
- Pirmkārt, sadaļā “
Tagad izpildiet tālāk norādīto JavaScript kodu:
funkciju etiķeteTeksts ( ) {ļaut get = document.getElementById ( 'lbl' )
get.innerHTML= 'Saīsinātais nosaukums ir dokumenta objekta modelis' ;
}
-
- Deklarējiet funkciju ar nosaukumu ' etiķeteTeksts() ”.
- Tās definīcijā piekļūstiet norādītā “ etiķete ' izmantojot ' document.getElementById() ” metode.
- Visbeidzot lietojiet innerHTML rekvizītu un piešķiriet jaunu ' tekstu ” vērtību piekļūtajai iezīmei. Tādējādi, noklikšķinot uz pogas, etiķetes teksts tiks pārveidots par jaunu teksta vērtību.
Izvade
Iepriekš minētajā izvadā var novērot, ka teksta vērtība “ etiķete ” tiek mainīts gan DOM, gan kodā, kā arī Elementi ” sadaļa.
2. pieeja: mainiet etiķetes tekstu JavaScript, izmantojot rekvizītu innerText
' iekšējaisTeksts ” rekvizīts atgriež elementa teksta saturu. Šo rekvizītu var ieviest, lai piešķirtās etiķetes tekstam piešķirtu ievades laukā ievadīto lietotāja ievadīto vērtību.
Sintakse
elements.innerText
Iepriekš minētajā sintaksē:
-
- ' elements ” norāda elementu, kuram tiks lietots konkrētais rekvizīts, lai atgrieztu tā teksta saturu.
Piemērs
Šis piemērs parāda norādīto koncepciju:
< centrs >< ķermeni >Ievadiet vārdu: < ievade veids = 'teksts' id = 'vārds' vērtību = '' automātiskā pabeigšana = 'izslēgts' >
< lpp >< ievade veids = 'poga' id = 'bt' vērtību = 'Mainīt etiķetes tekstu' onclick = 'labelText()' > lpp >
< etiķete id = 'lbl' > N / A etiķete >
ķermeni > centrs >
-
- Vispirms piešķiriet ievades teksta lauku ar norādīto ' id ”. ' null ' vērtība šeit norāda, ka vērtība tiks iegūta no lietotāja un automātiskās pabeigšanas iestatīšana uz ' izslēgts ” izvairīsies no ieteiktajām vērtībām.
- Pēc tam iekļaujiet etiķeti ar norādīto ' id ' un ' tekstu ” vērtību.
Tagad JavaScript koda fragmentā veiciet šādas darbības:
funkciju etiķeteTeksts ( ) {ļaut get = document.getElementById ( 'lbl' ) ;
ļaut nosaukums = document.getElementById ( 'vārds' ) .value;
get.innerText = nosaukums;
}
-
- Definējiet funkciju ar nosaukumu ' etiķeteTeksts() ”. Tās definīcijā piekļūstiet izveidotajai etiķetei, izmantojot “ document.getElementById() ” metode.
- Līdzīgi atkārtojiet iepriekš minēto darbību, lai piekļūtu norādītajam ievades teksta laukam un iegūtu no tā lietotāja ievadīto vērtību.
- Visbeidzot, ienestajai iezīmei piešķiriet lietotāja ievadīto vērtību no iepriekšējās darbības. Tādējādi etiķetes teksts tiks mainīts uz lietotāja ievadīto vērtību ievades teksta laukā.
Izvade
Iepriekš minētajā iznākumā ir redzams, ka vēlamā prasība ir sasniegta.
3. pieeja: Mainiet etiķetes tekstu JavaScript, izmantojot jQuery text() un html() metodes
' teksts () ” metode atgriež atlasīto elementu teksta saturu. html() ” metode atgriež atlasīto elementu iekšējo HTML saturu.
Sintakse
$ ( atlasītājs ) .teksts ( )
Šajā sintaksē:
-
- ' atlasītājs ” norāda uz piekļūtā elementa teksta saturu.
Iepriekš norādītajā sintaksē:
-
- ' atlasītājs ” attiecas uz piekļūtā elementa iekšējo HTML.
Piemērs
Šis piemērs ilustrēs norādīto koncepciju, izmantojot jQuery metodes.
Izlasiet tālāk norādīto koda fragmentu:
< skripts src = “https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > skripts >< centrs >< ķermeni >
< etiķete id = 'lbl1' > Šī ir šī vietne: etiķete >
< br >< br >
< etiķete id = 'lbl2' > Saturs: etiķete >
< br >< br >
< pogu onclick = 'labelText()' > Klikšķis priekš Tīmekļa vietne pogu >
< pogu onclick = 'labelText2()' > Klikšķis priekš Saturs pogu >
ķermeni > centrs >
-
- Pirmkārt, iekļaujiet ' jQuery ” bibliotēku, lai pielietotu tās metodes.
- Pēc tam sadaļā “
', iekļaujiet divas dažādas etiķetes ar norādīto ' id ” un teksta vērtību pret katru no tiem. - Tāpat katrai izveidotajai etiķetei piešķiriet atsevišķas pogas. Abām pogām būs pievienots ' onclick ” notikumu, kas izsauc divas dažādas norādītas funkcijas.
Tagad izejiet cauri šādām JavaScript koda rindām:
funkciju etiķeteTeksts ( ) {$ ( '#lbl1' ) .teksts ( 'Linux' )
}
funkciju etiķeteTeksts2 ( ) {
$ ( '#lbl2' ) .html ( 'JavaScript' )
}
-
- Pirmajā solī deklarējiet funkciju ar nosaukumu ' etiķeteTeksts() ”.
- Tās definīcijā piekļūstiet iezīmei pret ienesto ' id ” un piemēro „ teksts () ” metodi. Tā rezultātā etiķetes teksta vērtība tiks mainīta uz tā parametrā norādīto vērtību.
- Līdzīgi definējiet funkciju ar nosaukumu ' etiķeteTeksts2() ”.
- Šeit līdzīgi atkārtojiet iepriekš apspriesto darbību, lai piekļūtu etiķetei. Šajā gadījumā izmantojiet ' html() ” metode. Šī metode darbosies arī tādā pašā veidā un atgriezīs norādīto teksta vērtību, tādējādi mainot etiķetes tekstu.
Izvade
Iepriekš minētajā izvadā dokumenta objekta modeļa (DOM) etiķetes pirmā pārveidotā teksta vērtība atbilst jQuery ' teksts () ' metode, bet otra ir rezultāts ' html() ” metode.
Mēs esam apkopojuši metodes, kā mainīt etiķetes tekstu, izmantojot JavaScript.
Secinājums
' innerHTML 'īpašums, ' iekšējaisTeksts 'īpašums vai jQuery' teksts () ' un ' html() ” metodes var izmantot, lai mainītu etiķetes tekstu, izmantojot JavaScript. InnerHTML rekvizītu var lietot, lai iegūtu konkrēto etiķeti un mainītu tā teksta saturu uz tikko piešķirtu teksta vērtību. InnerText rekvizītu var ieviest, lai piešķirtajai etiķetei piešķirtu jaunu teksta vērtību, tādējādi mainot to. jQuery pieeju var izmantot, lai pārveidotu etiķetes teksta vērtību, izmantojot tās divas metodes, kā rezultātā tiek iegūts vienāds rezultāts divu dažādu piešķirto teksta vērtību veidā. Šis raksts demonstrēja paņēmienus, kā mainīt etiķetes tekstu, izmantojot JavaScript.