InnerHTML -eiendom i JavaScript

Innerhtml -egenskapen muliggjør manipulering av HTML -innholdet på forskjellige måter. InnerHTML lar brukeren angi/oppdatere HTML -innholdet, eller få innholdet i et HTML -element. Innerhtml -egenskapen bruker getElementById -metoden for å identifisere elementet og utføre en relevant operasjon.

For bedre forståelse har vi delt artikkelen i forskjellige biter for å demonstrere bruken av den indre HTML -egenskapen i detalj:

• Hvordan Innerhtml -eiendom fungerer i JavaScript
• Hvordan få innholdet i et element ved å bruke den indre egenskapen
• Hvordan du angir innholdet i et element ved hjelp av Innerhtml -eiendommen
• Hvordan oppdatere innholdet i et element ved hjelp av InnerHTML -egenskapen

Hvordan Innerhtml -eiendom fungerer i JavaScript

InnerHTML -egenskapen setter/oppdaterer eller returnerer HTML -innholdet i et element. Begge funksjonalitetene til en innerhtml -egenskap har forskjellige syntakser som er gitt nedenfor.

For å få HTML -innholdet:

Htmlobject.indrehtml;

For å angi/oppdatere HTML -innholdet:

Htmlobject.indrehtml = "new-val";

I syntaksene ovenfor, Htmlobject forekomst identifiserer HTML -elementet som InnerHTML vil bli brukt på. Og elementet identifiseres ved å bruke getElementById metode. Mens Nyval er enhver verdi som vil bli satt til et HTML -element.

Hvordan bruke Innerhtml -eiendom i JavaScript

Denne delen verver forskjellige eksempler som viser bruken av den indre egenskapen i JavaScript.

Hvordan bruke InnerHTML -egenskapen for å oppdatere HTML -innhold

Følgende kodebiter demonstrerer arbeidet med InnerHTML -egenskapen for å oppdatere HTML -innholdet.

Html

Velkommen til Linuxhint

Klikk her for å få

Ovennevnte kode har en H4 element med id = ”h”Og en knapp med ved trykk Egenskap.

JavaScript

funksjon get ()
Varsel (dokument.GetElementById ("H").indrehtml);

Ovennevnte JavaScript -kode oppretter en get () -funksjon og inneholder et varsel som vil vise innholdet i Element ID = ”h“.

Produksjon

Utgangen viser at innholdet i et HTML -element vises som et varselinnhold.

Hvordan bruke InnerHTML -egenskapen for å oppdatere HTML -innhold

I denne delen lærer du å oppdatere innholdet i et HTML -element ved hjelp av InnerHTML -egenskapen.

Html

Linuxhint

Klikk her for å oppdatere

Ovennevnte kode oppretter et avsnitt med ID = ”P1”Og en knapp med en ved trykk Egenskap.

JavaScript

Funksjonsoppdatering ()
dokument.getElementById ("P1").indrehtml = "Velkommen! InnerHTML -eiendom brukes! ";

JS -koden skrevet ovenfor oppretter en funksjon som er navngitt Oppdater() som vil bli påkalt på klikket på knappen for å bruke InnerHTML -egenskapen på element (avsnitt) ID = ”P1“.

Produksjon

Fra utgangen observeres det at innholdet i avsnittet blir oppdatert.

Hvordan bruke InnerHTML -egenskapen for å angi HTML -innholdet

Her vil vi vise hvordan Innerhtml setter innholdet i et HTML -element. For dette er HTML- og JavaScript -koden som praktiseres i denne delen utdypet nedenfor.

Html

Dette er et avsnitt

Klikk her for å angi innholdet

Ovennevnte HTML -kode har to avsnitt der verdien av første ledd (id = ”P1“) Vil bli brukt til å angi verdien av andre ledd (ID =”P2“).

Merk: De div i ovennevnte kode er bare for å forstå.

JavaScript

funksjonssett ()
const gammelt = dokument.getElementById ("P1").indrehtml;
dokument.getElementById ("P2").indrehtml = gammel;

En sett () -funksjon opprettes som har to uttalelser. Den første uttalelsen får innholdet fra avsnittet (ID = ”P1“) Og lagrer den i en variabel (gammel). Og den andre uttalelsen setter verdien av variabelen til avsnittet (ID = ”P2“).

Produksjon

Fra output ovenfor har avsnittet ingenting å vise, men når du klikker på knappen innholdet i avsnittet (ID = ”P1“) Er satt til avsnittet (ID =”P2“)

Konklusjon

Innerhtml -egenskapen til JavaScript gjør det mulig å få eller oppdatere/angi innholdet i et HTML -element. Ved hjelp av getElementById -metoden identifiserer den indre HTML -elementet et HTML -element. I denne artikkelen demonstreres den innerhtml -egenskapen til JavaScript på en kort måte. Hvert underavsnitt her presenterer funksjonaliteten til InnerHTML -egenskapen for å få, oppdatere eller angi innholdet i et HTML -element.