Alt du trenger å vite om indre HTML i JavaScript



Den indre HTML i JavaScript er en veldig hendig funksjon og brukes mye for å gi et mer dynamisk og allsidig aspekt til nettsidene som blir opprettet.

JavaScript er et av de mest brukte programmeringsspråkene. Det er også ganske populært for sin allsidighet på tvers av plattformene. Det er forskjellige egenskaper i som gjør arbeidet ditt med å bygge et dynamisk nettsted enklere. I denne artikkelen vil vi diskutere Indre HTML i JavaScript i følgende rekkefølge:

Introduksjon til JavaScript

JavaScript brukes som et programmeringsspråk på klientsiden så vel som et programmeringsspråk på serversiden. brukes til å utføre på klientsiden så vel som server-siden til ethvert program. En node kan også refereres til som Node.js flere steder.





Javascript - indre html i javascript - edureka

hvordan bli en tablåutvikler

JavaScript gir en mengde metoder for å utføre flere funksjoner uten problemer. Dette er det som gjorde JavaScript til et av de mest populære programmeringsspråkene, i tillegg til at det også brukes mye på tvers av flere typer produktutvikling.



Indre HTML i JavaScript

Det indre eiendom i JavaScript er en av de veldig praktiske funksjonene og brukes mye for å gi et mer dynamisk og allsidig aspekt til nettsidene som blir opprettet.

Hvis vi prøver å forklare innerHTML rett og slett, er arbeidet med innerHTML ganske enkelt å laste inn innholdet på siden uten å oppdatere hele siden. Dette sparer dataforbruket så vel som tiden bak sidelastningen og er ganske enkelt å få. Dette gir brukeren en veldig rask og responsiv følelse og dermed gjør brukeropplevelsen mye bedre.

Det høres kanskje litt vanskelig ut, men la oss prøve å forstå dette ved hjelp av et eksempel.



Eksempel:

 

Klikk her for å endre den indre HTML-teksten.

funksjon myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Avsnitt endret!' }

Her i koden ovenfor, i paragraf-koden, er id-en til det som er avsnitt 1.

Det er en funksjon kalt myfunction () som vil bli tilbakekalt ved å klikke på teksten “Klikk her for å endre innerHTML-tekst”.Når funksjonen tilbakekalles ved klikk, blir funksjonen utført som sier getElementById (“avsnitt1”), som angav at elementet med Id som en demo skal velges.

Videre har vi den indre HTML-funksjonen som ganske enkelt betyr etter on-click hva som skal gjøres. Her i eksemplet ovenfor er det ganske enkelt “Avsnitt endret”.

hva er vektor i java

Nedenfor er den første utgangen av koden ovenfor.

Nedenfor er den endrede utgangen etter klikket.

Indre HTML med bestilt eller uordnet liste

Nedenfor er et eksempel for å vise bruken av innerHTML med ordnet eller uordnet liste.

Eksempel:

 
  • Hallo
  • Hallo igjen

Klikk på knappen nedenfor for å få innholdet i ul-elementet.

Prøv det-funksjonen helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Her blir innerHTML utløst av knappen som er definert av navnet “Prøv det”.

Den første utgangen av teksten ovenfor er:

Utgangen etter klikk på knappen. Klikket på knappen fører ikke til omlastning av siden, men i stedet på grunn av bruk av innerHTML.

hvordan lage dashbord i kraft bi

InnerHTML for å endre URL

Nedenfor er et annet eksempel som viser bruken av innerHTML for å endre URL ved å klikke på knappen.

Eksempel:

  Wikipedia Endre lenkefunksjon myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}

Ovennevnte eksempel gir opprinnelig lenken til Wikipedia-nettstedet, men når du klikker på knappen, endres lenken til Google.

Det er flere slike operasjoner der innerHTML er nyttig når siden ikke skal lastes inn på nytt og bare en del skal oppdateres.Dette sparer tid, så vel som færre anstrengelser, skal gjøres for tilnærmingen.Den største fordelen med innerHTML er brukeropplevelsen som forbedres med denne funksjonen.

Sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).

Har du spørsmål til oss? Vennligst nevn det i kommentarfeltet i “String Concatenation in JavaScript”, så kommer vi tilbake til deg.