HTML DOM tillater deg å endre HTML -innholdet ved å bruke "indrehtml”Eiendom. “indrehtml”Brukes vanligvis på websider for å generere dynamisk HTML -innhold som kommentarskjemaer, registreringsskjemaer og lenker.

Denne oppskrivningen vil diskutere prosedyren for å endre HTML-elementene ved hjelp av JavaScript. Dessuten vil eksemplene relatert til bruk av InnerHTML -egenskap også bli demonstrert i denne artikkelen. Så la oss starte!

Syntaks av Innerhtml JavaScript -eiendom

element.INNERHTML = verdi

Her, “element”Er HTML -elementet du har valgt for å endre innholdet, og“verdi”Er innholdet vi vil sette.

Eksempel 1: Endre HTML -elementer ved hjelp av JavaScript

Dette eksemplet vil vise deg hvordan du bruker "indrehtml”JavaScript -egenskap for å endre et HTML -elementets innhold. For det første vil vi legge til et overskriftselement med

overskriftskode og et avsnitt med

HTML -tag:

Endre HTML -elementer ved hjelp av JavaScript

En teststreng

Nå ønsker vi å endre innholdet i “

”Element som har ID”P1”. For å gjøre det, vil vi bruke "dokument.getElementById ()”Metode for å få det spesifiserte elementet. Etter det vil vi sette innholdet i vår

element til “Dette er Linuxhint.com”:

Vi har endret innholdet i ovennevnte avsnitt

Utfør ovennevnte program i din favorittkodeditor eller en hvilken som helst online kodende sandkasse; Imidlertid vil vi bruke JSBIN til dette formålet:

Sjekk ut den undergitte utdata, som vi fikk fra å utføre det ovennevnte programmet:

Eksempel 2: Endre HTML -elementer ved hjelp av JavaScript

I forrige eksempel har vi endret innholdet i avsnittselementet. Nå skal vi skrive et JavaScript -program for å endre innholdet i overskriften HTML -element.

Som du ser har vi lagt til en overskrift med

Tag med ID “ID1”Å ha innholdet”Den gamle JavaScript -overskriften”:

Den gamle JavaScript -overskriften

I neste trinn vil vi lage en elementvariabel som vil påkalle "dokument.getElementById ()”Metode for å få overskriftselementet med ID”ID1”:

Dette programmet endret "den gamle JavaScript -overskriften" til "The New JavaScript Heading"

Den undergitte utgangen betyr at innholdet i overskriften HTML-elementet endres nå:

Eksempel 3: Endre HTML -elementer ved hjelp av JavaScript

Du kan også endre innholdet i de flere HTML -elementene på en gang. For å demonstrere deg hvordan du gjør det, vil vi legge til tre HTML -elementer, en overskrift med

Tag, et avsnitt med taggen, og et innholdsdivisjon HTML -element med taggen:

Endre HTML -elementer ved hjelp av JavaScript

Dette er det første P -elementet.

Dette er det første divelementet.

Nå vil vi endre innholdet i avsnittselementet med ID "P1”Og innholdsdivisjonselement med“div”Id:

Ta en titt på utdataene fra vårt JavaScript -program:

Eksempel 4: Endre HTML -elementer ved hjelp av JavaScript

Du kan også slette innholdet i et HTML -element ved å bruke JavaScript "indrehtml”Eiendom. I den følgende JavaScript -koden har vi lagt til et avsnittselement med "demo”Id:

Klikk på den gitte knappen nedenfor for å slette HTML -innholdet

I neste trinn vil vi legge til en knapp og legge ved en "ved trykk”Hendelseslytter til det. Når vi skal klikke på "Slett”-Knappen, den vil påkalle“MyFunction ()”Metode for å slette innholdet i

HTML -element:

Slett

Til slutt vil vi definere "MyFunction ()”Metode som følger:

Utførelse av det ovennevnte programmet vil vise deg følgende utdata. Klikk på "Slett”Knapp for å slette innholdet i avsnitt HTML -elementet:

Som du kan se, "indrehtml”Eiendom av

HTML -elementet er nå satt til tomt:

Konklusjon

De indrehtml HTML DOM -eiendom brukes til å endre innholdet i HTML -elementene i JavaScript. Det kan også brukes til å skrive den dynamiske HTML på HTML -dokumentet, for eksempel lenker, kommentarskjemaer og registreringsskjemaer. Denne oppskrivningen diskuterte prosedyren for å endre HTML-elementene ved hjelp av JavaScript. Videre er eksempler relatert til bruk av Innerhtml HTML -egenskap også demonstrert i denne artikkelen.