Denne tutorial vil beskrive metoderne til at skrive HTML-kode dynamisk ved hjælp af JavaScript.
Hvordan skriver man HTML-kode dynamisk ved hjælp af JavaScript?
For at skrive HTML-kode ved hjælp af JavaScript skal du bruge følgende metoder:
Metode 1: Skriv HTML-kode dynamisk ved hjælp af document.createElement()-metoden
JavaScripts ' document.createElement() ' metode med ' tekstindhold ” egenskab bruges til at skrive en HTML-kode i JavaScript dynamisk. Ved at bruge metoden createElement() kan du oprette et bestemt HTML-element, og egenskaben textContent bruges til at indstille tekstindholdet.
Syntaks
Brug den givne syntaks til at oprette et HTML-element i JavaScript:
dokument. skabeElement ( 'tagnavn' )
Eksempel
Her vil vi først oprette et afsnit i en JavaScript-fil ved hjælp af HTML-koden
, der er sendt i en ' createElement() ” metode:
konst tekst = dokument. skabeElement ( 'p' ) ;Brug egenskaben textContent til at sætte teksten i et afsnit:
tekst. tekstindhold = 'Velkommen til Linuxhint' ;
Udskriv til sidst teksten på websiden ved hjælp af ' document.write() ” metode:
dokument. skrive ( tekst. tekstindhold ) ;Her kan du se i outputtet, at vi med succes skriver teksten på websiden ved hjælp af JavaScript:
Metode 2: Skriv HTML-kode dynamisk ved hjælp af innerHTML Property
For at skrive HTML-kode dynamisk, brug JavaScript ' indreHTML ” ejendom. Det er den enkleste tilgang til at ændre indholdet af et HTML-element. Det understøtter alle browsere.
Syntaks
Følg den givne syntaks for at bruge indreHTML-egenskaben:
indreHTML = 'tekst'Eksempel
I HTML-filen skal du først oprette en knap, der kalder den definerede funktion ' overskrift() ” i JavaScript på klikhændelsen:
< knap ved klik = 'overskrift()' > Klik her knap >Opret et afsnit ved hjælp af
-tagget, hvor teksten vises fra JavaScript, og tildel det et id:
< p id = 'overskrift' > s >Definer en funktion ' overskrift() ” i en JavaScript-fil. Få referencen til HTML-elementet ved hjælp af dets tildelte id ved hjælp af ' getElementById() '-metoden og anvende en ' indreHTML ” ejendom på det:
funktionsoverskrift ( ) {dokument. getElementById ( 'overskrift' ) . indreHTML = '
Velkommen til Linuxhint
' ;}
Produktion
Vi har samlet al den væsentlige information relateret til at skrive HTML-koden dynamisk ved hjælp af JavaScript.
Konklusion
For at skrive HTML-kode dynamisk i JavaScript skal du bruge ' document.createElement() ' metode med ' tekstindhold ' ejendom eller ' indreHTML ” ejendom. I den første metode behøver du ikke nogen HTML-kode, mens du i indreHTML-egenskaben skal have adgang til HTML-elementet og udføre en operation på det. I denne tutorial beskrev vi metoderne til at skrive HTML-kode ved hjælp af JavaScript dynamisk.