Som du vet er JavaScript et dynamisk skriptspråk. For å gi dynamisk funksjonalitet til websider, kan HTML -kode skrives ved hjelp av HTML -elementer i JavaScript, og CSS -attributter kan brukes i kombinasjon med HTML -elementer i JavaScript for å tilpasse websiden din. JavaScripts “CreateElement ()”Metode lar deg lage HTML -elementer, og“indrehtml”Eiendom lar deg skrive innhold for websider.

Denne opplæringen vil beskrive metodene for å skrive HTML -kode dynamisk ved hjelp av JavaScript.

Hvordan skrive HTML -kode dynamisk ved hjelp av JavaScript?

For å skrive HTML -kode ved hjelp av JavaScript, bruk følgende metoder:

• Ved hjelp av dokument.CreateElement () -metode
• Innerhtml eiendom

Metode 1: Skriv HTML -kode dynamisk ved hjelp av dokument.CreateElement () -metode

JavaScripts “dokument.CreateElement ()”Metode med“Tekstkonkurranse”Eiendom brukes til å skrive en HTML -kode i JavaScript dynamisk. Ved hjelp av CreateElement () -metoden kan du opprette et bestemt HTML -element, og Egenskaper for tekstinnhold brukes til å angi tekstinnholdet.

Syntaks

Bruk den gitte syntaks for å lage et HTML -element i JavaScript:

dokument.CreateElement ('Tagname')

Eksempel

Her vil vi først opprette et avsnitt i en JavaScript -fil ved hjelp av HTML

taggen passert i en "CreateElement ()”Metode:

const tekst = dokument.CreateElement ('P');

Bruk Egenskapen TextContent til å angi teksten i et avsnitt:

tekst.textContent = "Velkommen til Linuxhint";

Til slutt, skriv ut teksten på nettsiden ved å bruke "dokument.skrive()”Metode:

dokument.Skriv (tekst.textcontent);

Her kan du se i utdataene vi skriver teksten på websiden ved hjelp av JavaScript:

Metode 2: Skriv HTML -kode dynamisk ved hjelp av InnerHTML -egenskapen

For å skrive HTML -kode dynamisk, bruk JavaScript “indrehtml”Eiendom. Det er den enkleste tilnærmingen å endre innholdet i et HTML -element. Det støtter alle nettlesere.

Syntaks

Følg den gitte syntaksen for å bruke InnerHTML -egenskapen:

indrehtml = "tekst"

Eksempel

I HTML -filen oppretter først en knapp som vil kalle den definerte funksjonen "overskrift()”I JavaScript på klikkhendelsen:

Klikk her

Lag et avsnitt ved hjelp av

Tag der teksten vil bli vist fra JavaScript og tilordne en ID til den:

Definere en funksjon “overskrift()”I en JavaScript -fil. Få referanse til HTML -elementet ved å bruke den tildelte ID -en ved hjelp av “getElementById ()”Metode og bruk en“indrehtml”Eiendom på den:

funksjonsoverskrift ()
dokument.getElementById ('overskrift').indrehtml = "

Velkommen til Linuxhint

";

Produksjon

Vi har samlet all den essensielle informasjonen relatert til å skrive HTML -koden dynamisk ved hjelp av JavaScript.

Konklusjon

For å skrive HTML -kode dynamisk i JavaScript, bruk "dokument.CreateElement ()”Metode med“Tekstkonkurranse”Eiendom eller“indrehtml”Eiendom. I den første metoden trenger du ingen HTML -kode, mens du er i InnerHTML -egenskapen, må du få tilgang til HTML -elementet og utføre en operasjon på den. I denne opplæringen beskrev vi metodene for å skrive HTML -kode ved hjelp av JavaScript dynamisk.