Få teksten til et HTML -element ved hjelp av JavaScript
Noen ganger trenger utviklere å sette eller få teksten til et HTML -element for å utføre forskjellige oppgaver. For å få teksten til et element, bruk "Tekstkonkurranse”Eiendom med egenskaper i Innerhtml og innertekst. Elementet.TextContent er en DOM -nivå 3 -funksjon som støttes fullt ut i alle nettlesere.
Denne artikkelen vil forklare prosedyren for å få teksten til et element ved hjelp av JavaScript.
Hvordan få teksten til et HTML -element ved hjelp av JavaScript?
Bruk følgende tilnærminger for å få teksten til et element ved hjelp av JavaScript:
- TEXTCONTENT -egenskap med Innerhtml -eiendom
- TEXTCONTENT -egenskap med Innertext -egenskap
Metode 1: Få teksten til et HTML -element ved å bruke TextContent -egenskapen med InnerHTML -egenskap
Tekstinnholdet i den spesifiserte noden og dens etterkommere kan settes eller returneres ved hjelp av "Tekstkonkurranse" Egenskap. Den returnerer en sammenkobling av hvert barneknodens tekstinnhold. Imidlertid returneres en tom streng som en utgang i tilfelle elementet er tomt.
Syntaks
Følg den gitte syntaksen for å bruke "Tekstkonkurranse”Eiendom for å få teksten til HTML -elementet:
element.Tekstkonkurranse
Eksempel
I det følgende eksemplet vil vi lage en uordnet liste med barneelementer
- Html
- CSS
- JavaScript
- Node JS
- Reagere
Opprett en knapp, og fest en “ved trykk”Hendelse til det som vil utløse det definerte“getText ()”Metode:
Opprett et avsnitt ved å tilordne en ID til den, der utdataene vises:
Etter å ha utført ovennevnte HTML -kode, vil utdataene være som følger:
Nå, i en JavaScript -fil, først, få elementet ved å bruke "getElementById ()”Metode og hente deretter teksten ved hjelp av“Tekstkonkurranse”Eiendom og lagre den i en variabel”tekst”. Deretter, ring "indrehtml”Eiendom som skal skrive ut teksten på det spesifikke feltet i en enkelt rad med mellomrom.
funksjon getText ()
var tekst = dokument.getElementById ("Liste").tekstinnhold;
dokument.getElementById ("tekst").InnerHTML = tekst;
Den tilsvarende utgangen vil være som følger:
La oss sjekke ut den andre metoden!
Metode 2: Få teksten til et HTML -element ved å bruke TextContent -egenskapen med innerstekstegenskap
For å få teksten i samme format som vist på en webside, som i en listeform, bruk "Innertekst”Eiendom med“Tekstkonkurranse”Eiendom.
Syntaks
Følgende syntaks brukes til innerstekstegenskapen:
element.Innertekst
Eksempel
I JavaScript -filen, først, definere en funksjon "getText ()”Som vil utløse på knappen klikk for å få tekstinnholdet i den uordnede elementet:
funksjon getText ()
var tekst = dokument.getElementById ("Liste").tekstinnhold;
dokument.getElementById ("tekst").innertekst = tekst;
Produksjon
Ovennevnte GIF betyr at "Innertekst”Eiendom med“Tekstkonkurranse”Eiendom får teksten til et HTML -element i listeformatet.
Konklusjon
For å få teksten til et HTML -element, bruk "Tekstkonkurranse”Eiendom med“indrehtml”Og“Innertekst" egenskaper. Innerhtml vil skrive ut teksten til et element i en inline -rekkefølge, mens innersteksten skriver ut teksten i samme format. Denne artikkelen forklarte prosedyren for å få teksten til et element ved hjelp av JavaScript.