Få og sett indre tekst av HTML -elementer i jQuery
Denne oppskrivningen vil diskutere prosedyren for få og Angi indre tekst av HTML -elementer i jQuery. Dessuten vil eksemplene relatert til HTML (), tekst () og val () metoder for å få og sette HTML -elementer indre tekst bli gitt. Så la oss starte!
Få og angi indre tekst av HTML -elementer i jQuery ved bruk av HTML () -metode
JavaScript HTML () -metoden brukes til å få og stille inn InnerHTML eller innholdet i HTML -elementene i jQuery. Denne metoden returnerer innholdet i det første matchede HTML -elementet hvis du bruker det for å få den indre teksten; Mens du setter den indre teksten, overskriver den innholdet i alle HTML -elementer som blir matchet.
Syntaks av HTML () -metode
For å få den indre teksten til HTML -elementer:
$ (velger).html ()For å få og angi indre tekst av HTML -elementer:
$ (velger).HTML (verdi)For å få og angi indre tekst av HTML -elementer ved å bruke en funksjon:
$ (velger).HTML (funksjon (indeks, CurrentValue))I ovennevnte syntaks, “verdi”Er innholdet du vil legge til som den modifiserte indre teksten til HTML -elementer,”indeks”Legges til for å returnere indeksposisjonen i HTML -elementsettet, til slutt,”nåværende verdi”Legges til for å hente den nåværende indre teksten til et spesifikt HTML -element.
Eksempel: Få og sett indre tekst av HTML -elementer i jQuery () ved bruk av HTML () -metode
I det undergitte eksemplet vil vi endre den indre teksten til alle avsnitt som er lagt til som HTML-elementer med
stikkord. For å gjøre det, vil vi skrive følgende kode i vår "indeks.html”Fil:
Dette er første avsnitt.
Dette er andre avsnitt.
For å manipulere HTML -elementer i jQuery, må vi skrive ønsket kode i kroppen til $ (dokument).klar() Metode, i en JavaScript -fil. Her vil vi spesifisere det på "Klikk”Hendelse av vår“knapp”, Tolket vil velge alle“p”Elementer og setter innholdet til strengen som er spesifisert i“html ()”Metode:
$ (dokument).klar (funksjon ()$ ("knapp").klikk (funksjon ()
$ ("P").html ("dette er Linuxhint.com");
);
);
Etter å ha lagret den medfølgende koden i begge filene, vil vi åpne “indeks.html”Ved hjelp av VS -kode”Leverserver”:
Nå vil vi klikke på "Endre P -elementer innhold”-Knappen som er uthevet i utdataene:
Denne handlingen vil få alle HTML -avsnittelementene og sette sin indre tekst som følger:
Få og sett den indre teksten til HTML -elementer ved hjelp av Text () -metoden
Både tekst () og HTML () metoder brukes i jQuery for å få og angi HTML -elementene indre tekst. Men når du bruker tekst() Metode for å få innhold av HTML -elementer, den fjerner HTML -markeringen etter å ha hentet de matchede elementene. Så hvis du vil få tekst, angi tekst og HTML -markeringen av elementene på en gang, så gå til utførelsen av HTML () -metoden; Ellers fikk teksten () metoden deg dekket.
Syntaks av tekst () -metode
For å få innholdet i HTML -elementer:
$ (velger).tekst()For å få og angi innhold av HTML -elementer:
$ (velger).tekst (verdi)For å få og angi innhold av HTML -elementer ved å bruke en funksjon:
$ (velger).tekst (funksjon (indeks, currentValue))Her, “verdi”Er innholdet du vil angi som tekst for HTML -elementer,”indeks”Legges til for å returnere indeksposisjonen i HTML -elementsettet, til slutt,”nåværende verdi”Legges til for å hente det nåværende innholdet i et spesifikt HTML -element.
Eksempel: Få og sett den indre teksten til HTML -elementer ved hjelp av tekst () -metode
Nå vil vi utføre det forrige gitte eksemplet ved hjelp av “tekst()”Metode for å få og sette teksten til alle“p”HTML -elementer. Her er koden som vi har lagt til i "indeks.html”Fil:
Dette er første avsnitt.
Dette er andre avsnitt.
I vår "mitt prosjekt.JS”Fil, vi vil påkalle“tekst()”Metode for å angi den indre teksten til alle avsnittselementer til“Dette er Linuxhint.com”:
$ (dokument).klar (funksjon ()$ ("knapp").klikk (funksjon ()
$ ("P").tekst ("Dette er Linuxhint.com ");
);
);
Klikk på “Sett innhold”-Knappen vil endre teksten til de ekstra avsnittelementene til“Dette er Linuxhint.com”:
Få og angi indre tekst av HTML -elementer i jQuery ved hjelp av val () -metode
Når du legger til HTML -skjemaelementer i applikasjonen din, kan du bruke "val ()”Metode for å få og angi attributtverdien til de spesifiserte HTML -elementene. Den returnerer attributtet til det første matchede HTML -elementet når det påberopes for å få en verdi og i tilfelle å sette attributtverdien, endrer den attributtverdien for alle matchede HTML -elementer.
Syntaks av Val () -metode
For å få attributtverdien til HTML -elementer:
$ (velger).val ()For å få og angi attributtverdi av HTML -elementer:
$ (velger).Val (verdi)For å få og angi attributtverdi av HTML -elementer ved å bruke en funksjon:
$ (velger).Val (funksjon (indeks, CurrentValue))I ovennevnte syntaks, “verdi”Er den spesifiserte verdien du vil endre for et attributt til HTML -element,”indeks”Legges til for å returnere indeksposisjonen i HTML -elementsettet, til slutt,”nåværende verdi”Legges til for å hente gjeldende attributtverdi for det valgte HTML -elementet.
Eksempel: Få og sett indre tekst av HTML -elementer i jQuery ved bruk av Val () -metode
Det undergitte eksemplet vil endre attributtverdien til “inngangsfelt”Som er lagt til i vår“indeks.html”Fil:
Navn:
For dette formålet vil vi bruke "mitt prosjekt.JS”Fil for å angi verdien til“Dette er Linuxhint.com”Ved å bruke val () -metoden:
$ (dokument).klar (funksjon ()$ ("knapp").klikk (funksjon ()
$ ("Input: Text").Val ("Dette er Linuxhint.com ");
);
);
Vi vil klikke på "Angi verdien”-Knappen, og strengen”Dette er Linuxhint.com”Vil bli satt i inngangsfeltet:
Den ovennevnte utgangen erklærer at vi med hell har satt verdien av det ekstra inngangsfeltet.
Konklusjon
HTML (), tekst () og val () er de mest nyttige metodene som kan brukes til å få og angi den indre teksten til HTML -elementer i jQuery. tekst () -metoden får og angir innholdet i HTML -elementer, mens HTML () -metoden også angir HTML -markeringen. Du kan også påkalle Val () HTML -metoden for å endre attributtverdier. Denne oppskrivningen diskuterte metodene for å få og angi den indre teksten til HTML-elementer i jQuery ved å gi passende eksempler.