Alt hvad du behøver at vide om indre HTML i JavaScript



Den indre HTML i JavaScript er en meget praktisk funktion og bruges i vid udstrækning til at give et mere dynamisk og alsidigt aspekt til de websider, der oprettes.

JavaScript er et af de mest anvendte programmeringssprog. Det er også ret populært for sin alsidighed på tværs af platforme. Der er forskellige egenskaber i der gør dit arbejde med at opbygge et dynamisk websted lettere. I denne artikel vil vi diskutere den indre HTML i JavaScript i følgende rækkefølge:

Introduktion til JavaScript

JavaScript bruges som et programmeringssprog på klientsiden såvel som et programmeringssprog på serversiden. bruges til at udføre på klientsiden såvel som på serversiden af ​​ethvert program. En node kan også kaldes Node.js flere steder.





Javascript - indre html i javascript - edureka

JavaScript giver en overflod af metoder til at udføre flere funktioner let. Dette gjorde JavaScript til et af de mest populære programmeringssprog, og det bruges også bredt på tværs af flere slags produktudvikling.



Indre HTML i JavaScript

Det indre ejendom i JavaScript er en af ​​de meget praktiske funktioner og bruges i vid udstrækning til at give et mere dynamisk og alsidigt aspekt til de websider, der oprettes.

Hvis vi forsøger at forklare den indre HTML, så er arbejdet med den indre HTML simpelthen at indlæse sideindholdet uden at opdatere hele siden. Dette sparer dataforbruget såvel som tiden bag sidebelastningen og er stort set let at få. Dette giver brugeren en meget hurtig og lydhør fornemmelse, hvilket gør brugeroplevelsen meget bedre.

Det lyder måske lidt vanskeligt, men lad os prøve at forstå dette ved hjælp af et eksempel.



Eksempel:

 

Klik her for at ændre den indre HTML-tekst.

funktion myFunction () {document.getElementById ('afsnit1'). innerHTML = 'Afsnit ændret!' }

Her i ovenstående kode er id'et i afsnitskoden afsnit 1.

Der er en fungere navngivet myfunction (), som ville blive tilbagekaldt ved klik på teksten “Klik her for at ændre indre HTML-tekst”.Når funktionen tilbagekaldes ved klik, udføres funktionen, som siger getElementById (“afsnit1”), som angav, at elementet med Id som en demo skal vælges.

Derudover har vi den indreHTML-funktion, som simpelthen efter onclick betyder, hvad der skal gøres. Her i ovenstående eksempel er det simpelthen “Afsnit ændret”.

Nedenfor er den første output af ovenstående kode.

round robin planlægningsprogram i c

Nedenfor er den ændrede output efter klik.

Indre HTML med ordnet eller ikke-ordnet liste

Nedenfor er et eksempel for at vise brugen af ​​innerHTML med ordnet eller ikke-ordnet liste.

Eksempel:

 
  • Hej
  • Hej igen

Klik på knappen nedenfor for at få indholdet af ul-elementet.

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

Her udløses den indre HTML af knappen, der er defineret med navnet “Prøv det”.

Den oprindelige output af ovenstående tekst er:

Outputtet efter klik på knappen. Kliket på knappen fører ikke til genindlæsning af siden, men skyldtes i stedet brugen af ​​innerHTML.

hvordan man vender et tal i java

InnerHTML til ændring af URL

Nedenfor er et andet eksempel, der viser brugen af ​​innerHTML til at ændre URL'en ved at klikke på knappen.

Eksempel:

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

Ovenstående eksempel giver oprindeligt linket til Wikipedia-webstedet, men når der klikkes på knappen, ændres linket til Google.

Der er flere sådanne operationer, hvor innerHTML er praktisk, når siden ikke skal genindlæses, og kun en del skal opdateres.Dette sparer både tid og færre bestræbelser på tilgangen.Den største fordel ved innerHTML er brugeroplevelsen, der forbedres med denne funktion.

Tjek af Edureka. Webudvikling certificeringstræning hjælper dig med at lære, hvordan du opretter imponerende websteder ved hjælp af HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google API'er og distribuerer det til Amazon Simple Storage Service (S3).

Har du et spørgsmål til os? Nævn det i kommentarfeltet i “String Concatenation in JavaScript”, så vender vi tilbage til dig.