Innertext -eiendom i JavaScript | Forklart

Intertext -egenskapen til JavaScript brukes til å få eller angi teksten i et HTML -element og dens etterkommere. De Innertekst har et lignende arbeidsfenomen til indrehtml. Begge egenskapene manipulerer innholdet i et HTML -element, men med forskjellige aspekter. Innerteksten fokuserer på tekstinnholdet, og InnerHTML vurderer HTML -innholdet i et element.

Denne artikkelen gir et innblikk i innereksten for å oppnå følgende mål.

• Hvordan innerekstenegenskapen fungerer i JavaScript
• Hvordan bruke innerstekstegenskapen i JavaScript
• Forskjell mellom innerstekst og indrehtml

Hvordan innerekstenegenskapen fungerer i JavaScript

Arbeidet med innertekst avhenger av følgende syntaks.

For å få teksten til et HTML -element:

Node.Innertekst;

For å sette/oppdatere teksten til et HTML -element:

Node.innertekst = "tekst"

I syntaksene ovenfor:

• De Node refererer til HTML -elementet og alle dets etterkommere.
• De tekst representerer den nye teksten som vil bli oppdatert eller satt i stedet for den eksisterende teksten.

Hvordan bruke innerstekstegenskapen i JavaScript

Følgende eksempler viser bruken av Innertekst Eiendom i HTML.

Eksempel 1: Få teksten til et HTML -element

Vi har illustrert dette eksemplet for å vise hvordan tekst til et element kan oppnås ved bruk av innerstekst. eiendom.

Html

Dette er en eksempel av Innertekst

Klikk her for å få innereksten

I koden ovenfor, et avsnitt (ID = ”P1“) Opprettes som inneholder en liten Tag og a sterk stikkord. Dessuten blir en get () -funksjon kalt på et klikk på knapp.

JavaScript

funksjon get ()
Varsel (dokument.getElementById ("P1").Innertekst);

En funksjon som heter få() er opprettet som inneholder en varsling uttalelse for å vise teksten til et element (id = ”P1“).

Produksjon

Det observeres at teksten til avsnittet (id = ”P1“) Og alle dets etterkommere (spenn og sterkt) vises.

Eksempel 2: Oppdater teksten til et HTML -element

HTML- og JS -koden gitt nedenfor hjelper til med å oppdatere teksten til elementet.

Html

Dette er et eksempel på innerstekstegenskap

Klikk her for å oppdatere innereksten

HTML -koden oppretter et avsnitt med ID = ”P1”Og knapp som utfører Oppdater() funksjon på dens ved trykk eiendom.

JavaScript

Funksjonsoppdatering ()
dokument.getElementById ("P1").innertekst = "Teksten er oppdatert!";

JavaScript -koden gitt ovenfor oppretter en oppdatering () -funksjon som bruker innerstekstegenskapen på avsnittet med ID = ”P1“.

Produksjon

Det observeres fra utgangen at teksten til avsnittet er oppdatert til ny tekst.

Eksempel 3: Angi teksten for et HTML -element

I dette eksemplet vil teksten til det ene elementet bli plassert i det andre elementet, og følgende kode hjelper til med å gjøre det.

Html

Velkommen til Linuxhint

Klikk her for å angi innereksten

HTML -koden inneholder et avsnitt med ID = ”gammel“En knapp for å utløse sett() funksjon, og en overskrift med ID = ”ny“.

JavaScript

funksjonssett ()
dokument.getElementById ("Ny").InnRext = Dokument.getElementById ("gammel").Innertekst;

Ovennevnte kode får teksten til et avsnittselement (ID = ”gammel“) Og tildeler denne teksten til heading-elementet (ID =”ny“).

Produksjon

Ovennevnte utgang viser at teksten til avsnittet (ID = “gammel”) Er satt til en overskrift (ID =“ny).

Forskjell mellom innerstekst og indrehtml

De Innertekst og indrehtml kan gjøre forvirring i hodet ditt. Innereksten vurderer bare det tekstlige innholdet mens indrehtml Funksjoner på HTML -innholdet i et element som også kan inkludere taggene. Denne delen gir forskjellen mellom InterText og InnerHTML ved å bruke følgende kode.

Html

Velkommen til Linuxhint

for innertekst
For Innerhtml

Ovennevnte kode oppretter et avsnittsmerke og to knapper. Den første knappen utløser tekst() funksjon mens den andre funksjonen utfører html () funksjon.

JavaScript

FunctionText ()
Varsel (dokument.getElementById ("tekst").Innertekst);

funksjonHTML ()
Varsel (dokument.getElementById ("tekst").indrehtml);

To funksjoner opprettes som praksis Innertekst og indrehtml Egenskaper på et avsnitt ID = ”tekst“.

Produksjon

Det observeres at indrehtml viser de indre elementene mens Innertekst har bare hentet tekstinnholdet.

Konklusjon

Intertext -egenskapen til JavaScript lar deg få eller oppdatere/angi innholdet i et HTML -element. Denne artikkelen demonstrerer forskjellige syntakser av INTERTEXT -egenskapen til JavaScript med eksempler som bedre formidler konseptet. Ved å gå gjennom artikkelen, ville du ha lært å få teksten, oppdatere teksten eller angi en tekst til et HTML -element ved hjelp av INTERTEXT -egenskapen til JavaScript. Til slutt har vi presentert forskjellen mellom InterText og Innerhtml for å bane konseptet i hodet ditt.