În procesul de completare a unui anumit formular sau a unui chestionar, există adesea situații în care este necesar să se afișeze un anumit răspuns sau o notificare ca răspuns la opțiunea selectată. De exemplu, tratarea întrebărilor cu variante multiple etc. În astfel de cazuri, modificarea textului etichetei folosind JavaScript este foarte utilă pentru îmbunătățirea accesibilității formularelor HTML și a designului general al documentului.
Cum se schimbă textul etichetei folosind JavaScript?
Următoarele abordări pot fi utilizate pentru a schimba textul etichetei în JavaScript:
-
- „ innerHTML ” proprietate.
- „ innerText ” proprietate.
- jQuery „ text() ' și ' html() ” metode.
Abordarea 1: Schimbați textul etichetei în JavaScript utilizând proprietatea innerHTML
„ innerHTML ” proprietatea returnează conținutul HTML interior al unui element. Această proprietate poate fi utilizată pentru a prelua eticheta specifică și pentru a schimba textul acesteia la o valoare de text nou atribuită.
Sintaxă
element.innerHTML
În sintaxa de mai sus:
-
- „ element ” se referă la elementul asupra căruia proprietatea specifică va fi aplicată pentru a returna conținutul HTML.
Exemplu
Parcurgeți următorul fragment de cod pentru a explica clar conceptul menționat:
< centru >< corp >
< eticheta id = 'lbl' > DOM eticheta >
< br >< br >
< buton onclick = „labelText()” > Click aici buton >
corp > centru >
-
- În primul rând, în cadrul „
„, includeți „ eticheta „ cu „ specificat id ' și ' text ” valori. - După aceea, creați un buton cu un atașat „ onclick ” eveniment care invocă funcția labelText().
- În primul rând, în cadrul „
Acum, urmați codul JavaScript de mai jos:
funcţie labelText ( ) {lăsa get = document.getElementById ( 'lbl' )
get.innerHTML= „Numele prescurtat este Document Object Model” ;
}
-
- Declarați o funcție numită „ labelText() ”.
- În definiția sa, accesați id-ul „ eticheta ' folosind ' document.getElementById() ” metoda.
- În cele din urmă, aplicați proprietatea innerHTML și atribuiți un nou „ text ” valoarea etichetei accesate. Acest lucru va duce la transformarea textului etichetei într-o nouă valoare de text la clic pe butonul.
Ieșire
În rezultatul de mai sus, se poate observa că valoarea textului „ eticheta ” este modificat atât pe DOM, cât și în cod, precum și în „ Elemente ' secțiune.
Abordarea 2: Modificați textul etichetei în JavaScript utilizând proprietatea innerText
„ innerText ” proprietatea returnează conținutul text al elementului. Această proprietate poate fi implementată pentru a aloca o valoare introdusă de utilizator introdusă în câmpul de intrare textului etichetei atribuite.
Sintaxă
element.innerText
În sintaxa de mai sus:
-
- „ element ” indică elementul asupra căruia proprietatea specifică va fi aplicată pentru a returna conținutul său textual.
Exemplu
Următorul exemplu demonstrează conceptul declarat:
< centru >< corp >Introduceți un nume: < intrare tip = 'text' id = 'Nume' valoare = '' completare automată = 'off' >
< p >< intrare tip = 'buton' id = 'bt' valoare = „Schimbați textul etichetei” onclick = „labelText()” > p >
< eticheta id = 'lbl' > N / A eticheta >
corp > centru >
-
- Mai întâi, alocați un câmp de text de introducere cu „ id ”. „ nul „valoarea aici indică faptul că valoarea va fi preluată de la utilizator și setarea autocompletare la „ oprit ” va evita valorile sugerate.
- După aceea, includeți o etichetă cu indicația „ id ' și ' text ” valoare.
Acum, în fragmentul de cod JavaScript, efectuați următorii pași:
funcţie labelText ( ) {lăsa get = document.getElementById ( 'lbl' ) ;
lăsa nume = document.getElementById ( 'Nume' ) .valoare;
get.innerText = nume;
}
-
- Definiți o funcție numită „ labelText() ”. În definiția sa, accesați eticheta creată folosind „ document.getElementById() ” metoda.
- În mod similar, repetați pasul de mai sus pentru a accesa câmpul de text de intrare specificat și pentru a obține valoarea introdusă de utilizator din acesta.
- În cele din urmă, atribuiți valoarea introdusă de utilizator de la pasul anterior etichetei preluate. Aceasta va schimba textul etichetei cu valoarea introdusă de utilizator în câmpul de text de introducere.
Ieșire
În rezultatul de mai sus, este evident că cerința dorită este îndeplinită.
Abordarea 3: Schimbați textul etichetei în JavaScript folosind metodele jQuery text() și html()
„ text() ” returnează conținutul text al elementelor selectate. html() ” returnează conținutul innerHTML al elementelor selectate.
Sintaxă
$ ( selector ) .text ( )
În această sintaxă:
-
- „ selector ” indică conținutul text al elementului accesat.
În sintaxa de mai sus:
-
- „ selector ” se referă la innerHTML-ul elementului accesat.
Exemplu
Acest exemplu va ilustra conceptul declarat folosind metode jQuery.
Parcurgeți fragmentul de cod de mai jos:
< scenariu src = „https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js” > scenariu >< centru >< corp >
< eticheta id = 'lbl1' > Acesta este următorul site web: eticheta >
< br >< br >
< eticheta id = 'lbl2' > Conţinut: eticheta >
< br >< br >
< buton onclick = „labelText()” > Clic pentru Site-ul web buton >
< buton onclick = „labelText2()” > Clic pentru Conţinut buton >
corp > centru >
-
- În primul rând, includeți „ jQuery ” bibliotecă să-și aplice metodele.
- După aceea, în cadrul „
„, include două etichete diferite cu „ id ” și valoarea textului față de fiecare dintre ele. - De asemenea, alocați butoane separate pentru fiecare dintre etichetele create. Ambele butoane vor avea atașat un „ onclick ” eveniment care invocă două funcții diferite specificate.
Acum, parcurgeți următoarele linii de cod JavaScript:
funcţie labelText ( ) {$ ( „#lbl1” ) .text ( 'Linux' )
}
funcţie labelText2 ( ) {
$ ( „#lbl2” ) .html ( „JavaScript” )
}
-
- În primul pas, declarați o funcție numită „ labelText() ”.
- În definiția sa, accesați eticheta față de „ id ” și aplicați „ text() ” metoda la aceasta. Acest lucru va duce la schimbarea valorii text a etichetei la valoarea specificată în parametrul acesteia.
- În mod similar, definiți o funcție numită „ labelText2() ”.
- Aici, în mod similar, repetați pasul discutat mai sus pentru accesarea etichetei. În acest caz, aplicați „ html() ” metoda. Această metodă va funcționa, de asemenea, în același mod și va returna valoarea specificată a textului, modificând astfel textul etichetei.
Ieșire
În rezultatul de mai sus, prima valoare de text transformată a etichetei pe Document Object Model (DOM) corespunde jQuery „ text() ” iar cealaltă este rezultatul “ html() ” metoda.
Am compilat abordările pentru a schimba textul etichetei folosind JavaScript.
Concluzie
„ innerHTML „proprietatea, „ innerText „, sau „ jQuery” text() ' și ' html() ” Metodele pot fi utilizate pentru a schimba textul etichetei folosind JavaScript. Proprietatea innerHTML poate fi aplicată pentru a obține eticheta specifică și pentru a modifica conținutul textului acesteia la o valoare de text nou atribuită. Proprietatea innerText poate fi implementată pentru a aloca o nouă valoare de text etichetei accesate, modificând-o astfel. Abordarea jQuery poate fi folosită pentru a transforma valoarea textului etichetei cu ajutorul celor două metode ale sale, rezultând același rezultat sub forma a două valori diferite de text alocate. Acest articol a demonstrat tehnicile de schimbare a textului etichetei folosind JavaScript.