JavaScript är ett av de mest använda programmeringsspråken. Det är också ganska populärt för sin mångsidighet över plattformarna. Det finns olika egenskaper i som gör ditt arbete med att bygga en dynamisk webbplats enklare. I den här artikeln kommer vi att diskutera Inner HTML i JavaScript i följande sekvens:
Introduktion till JavaScript
JavaScript används både som programmeringsspråk på klientsidan och som programmeringsspråk på serversidan. används för att utföra på klientsidan såväl som på serversidan för alla applikationer. En nod kan också kallas Node.js på flera ställen.
JavaScript ger en mängd metoder för att flera funktioner ska kunna utföras med lätthet. Detta gjorde JavaScript till ett av de mest populära programmeringsspråken, och det används också i många olika produktutvecklingar.
Inre HTML i JavaScript
Det inre egendom i JavaScript är en av de mycket praktiska funktionerna och används ofta för att ge en mer dynamisk och mångsidig aspekt på de webbsidor som skapas.
Om vi bara försöker förklara innerHTML är arbetet med innerHTML helt enkelt att ladda sidinnehållet utan att uppdatera hela sidan. Detta sparar dataanvändningen samt tiden bakom sidbelastningen och är ganska lätt att få. Detta ger användaren en mycket snabb och lyhörd känsla vilket gör användarupplevelsen mycket bättre.
Det kan låta lite svårt men låt oss försöka förstå detta med hjälp av ett exempel.
Exempel:
Klicka här för att ändra den inre HTML-texten.
funktion myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Stycke ändrad!' }
Här i ovanstående kod, i stycke-taggen, är id: t för det här avsnitt 1.
Det finns en fungera namngiven myfunction () som skulle återkallas vid klick på texten 'Klicka här för att ändra innerHTML-text'.När funktionen återkallas vid klickningen körs funktionen som säger getElementById (“stycke1”), som angav att elementet med Id som en demo ska väljas.
Vidare har vi den inre HTML-funktionen som helt enkelt betyder efter onklick vad som ska göras. Här i exemplet ovan är det helt enkelt ”Stycke ändrat”.
Nedan visas den ursprungliga utgången för ovanstående kod.
slå samman sorteringskod c ++
Nedan visas den ändrade produktionen efter klicket.
Inre HTML med beställd eller oordnad lista
Nedan följer ett exempel för att visa användningen av innerHTML med beställd eller oordnad lista.
Exempel:
- Hej
- Hej igen
Klicka på knappen nedan för att hämta innehållet i ul-elementet.
Testa funktionen helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}Här utlöses innerHTML av knappen som definieras av namnet “Try it”.
Den ursprungliga utdata för ovanstående text är:
Utgången efter klick på knappen. Klicket på knappen leder inte till att sidan laddas om utan berodde istället på användning av innerHTML.
InnerHTML för att ändra webbadressen
Nedan följer ett annat exempel som visar användningen av innerHTML för att ändra webbadressen genom att klicka på knappen.
Exempel:
Wikipedia Ändra länkfunktion myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}
Ovanstående exempel ger initialt länken till Wikipedia-webbplatsen men när du klickar på knappen ändras länken till Google.
Det finns flera sådana operationer där innerHTML kommer till hands när sidan inte ska laddas om och endast en del ska uppdateras.Detta sparar tid och färre ansträngningar ska göras för tillvägagångssättet.Den största fördelen med innerHTML är användarupplevelsen som förbättras med den här funktionen.
Kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen i ”String Concatenation in JavaScript” så återkommer vi till dig.