Alles wat u moet weten over innerlijke HTML in JavaScript



De innerlijke HTML in JavaScript is een erg handige functie en wordt veel gebruikt om een ​​meer dynamisch en veelzijdig aspect te geven aan de webpagina's die worden gemaakt.

JavaScript is een van de meest gebruikte programmeertalen. Het is ook behoorlijk populair vanwege zijn veelzijdigheid op alle platforms. Er zijn verschillende eigendommen in die uw werk bij het bouwen van een dynamische website gemakkelijker maken. In dit artikel bespreken we de innerlijke HTML in JavaScript in de volgende volgorde:

Inleiding tot JavaScript

JavaScript wordt gebruikt als programmeertaal aan de clientzijde en als programmeertaal aan de serverzijde. wordt gebruikt om uit te voeren zowel aan de clientzijde als aan de serverzijde van elke applicatie. Een knooppunt kan op verschillende plaatsen ook wel Node.js worden genoemd.





Javascript - innerlijke html in javascript - edureka

JavaScript biedt een overvloed aan methoden voor verschillende functionaliteiten die gemakkelijk kunnen worden uitgevoerd. Dit is wat JavaScript tot een van de meest populaire programmeertalen heeft gemaakt, en het wordt ook op grote schaal gebruikt in verschillende soorten productontwikkeling.



Innerlijke HTML in JavaScript

Het innerlijk eigenschap in JavaScript is een van de zeer handige functies en wordt veel gebruikt om een ​​meer dynamisch en veelzijdig aspect te bieden aan de webpagina's die worden gemaakt.

Als we de innerHTML eenvoudig proberen uit te leggen, dan is het werk van de innerHTML eenvoudigweg het laden van de pagina-inhoud zonder de hele pagina te verversen. Dit bespaart zowel het datagebruik als de tijd achter het laden van de pagina en is vrij eenvoudig te winnen. Dit geeft de gebruiker een zeer snel en responsief gevoel, waardoor de gebruikerservaring veel beter wordt.

Het klinkt misschien een beetje moeilijk, maar laten we proberen dit te begrijpen met behulp van een voorbeeld.



Voorbeeld:

 

Klik hier om de innerHTML-tekst te wijzigen.

function myFunction () {document.getElementById ('paragraaf1'). innerHTML = 'Paragraaf gewijzigd!' }

Hier in de bovenstaande code, in de alinea-tag is de id daarvan alinea1.

Er is een functie genaamd myfunction () die zou worden ingetrokken bij het klikken op de tekst 'Klik hier om innerHTML-tekst te wijzigen'.Wanneer de functie wordt ingetrokken bij de klik, wordt de functie uitgevoerd die getElementById ('paragraaf1') zegt, waarin staat dat het element met de Id als demo moet worden geselecteerd.

hoe java classpath in te stellen

Verder hebben we de innerHTML-functie, wat simpelweg betekent na de onclick wat er moet gebeuren. Hier in het bovenstaande voorbeeld is het gewoon 'Paragraaf gewijzigd'.

Hieronder ziet u de eerste uitvoer van de bovenstaande code.

Hieronder ziet u de gewijzigde uitvoer na de klik.

Innerlijke HTML met geordende of ongeordende lijst

Hieronder is een voorbeeld om het gebruik van innerHTML met geordende of ongeordende lijst te laten zien.

Voorbeeld:

hoe te doen met de kracht van in java
 
  • Hallo
  • welkom terug

Klik op de onderstaande knop om de inhoud van het ul-element te zien.

Probeer het, functie helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraaf1'). InnerHTML = x}

Hier wordt de innerHTML geactiveerd door de knop gedefinieerd door de naam 'Probeer het'.

De eerste uitvoer van de bovenstaande tekst is:

De output na het klikken op de knop. De klik op de knop leidde niet tot het herladen van de pagina, maar was te wijten aan het gebruik van innerHTML.

InnerHTML voor het wijzigen van de URL

Hieronder staat nog een voorbeeld dat het gebruik van innerHTML laat zien voor het wijzigen van de URL bij het klikken op de knop.

Voorbeeld:

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

Het bovenstaande voorbeeld geeft in eerste instantie de link naar de Wikipedia-website, maar wanneer op de knop wordt geklikt, verandert de link in Google.

Er zijn verschillende van dergelijke bewerkingen waarbij innerHTML handig is als de pagina niet opnieuw moet worden geladen en slechts een deel moet worden bijgewerkt.Dit bespaart tijd en er moeten minder inspanningen worden geleverd voor de aanpak.Het grootste voordeel van innerHTML is de gebruikerservaring die met deze functie wordt verbeterd.

Bekijk de door Edureka. Web Development Certification Training helpt u te leren hoe u indrukwekkende websites kunt maken met HTML5, CSS3, Twitter Bootstrap 3, jQuery en Google API's en deze kunt implementeren op Amazon Simple Storage Service (S3).

Heeft u een vraag voor ons? Vermeld het in het commentaargedeelte van 'String Concatenation in JavaScript' en we nemen contact met u op.