Denne opplæringen vil beskrive metodene for å skrive HTML-kode dynamisk ved hjelp av JavaScript.
Hvordan skrive HTML-kode dynamisk ved å bruke JavaScript?
For å skrive HTML-kode ved hjelp av JavaScript, bruk følgende metoder:
Metode 1: Skriv HTML-kode dynamisk ved å bruke document.createElement()-metoden
JavaScripts ' document.createElement() '-metoden med ' textContent egenskapen brukes til å skrive en HTML-kode i JavaScript dynamisk. Ved å bruke createElement()-metoden kan du lage et bestemt HTML-element, og egenskapen textContent brukes til å angi tekstinnholdet.
Syntaks
Bruk den gitte syntaksen for å lage et HTML-element i JavaScript:
dokument. oppretteElement ( 'tagnavn' )
Eksempel
Her vil vi først lage et avsnitt i en JavaScript-fil ved å bruke HTML-koden
som sendes i en ' createElement() ' metode:
konst tekst = dokument. oppretteElement ( 'p' ) ;Bruk egenskapen textContent for å sette teksten i et avsnitt:
tekst. textContent = 'Velkommen til Linuxhint' ;
Skriv til slutt ut teksten på nettsiden ved å bruke ' document.write() ' metode:
dokument. skrive ( tekst. textContent ) ;Her kan du se i utdataene at vi har skrevet teksten på nettsiden med JavaScript:
Metode 2: Skriv HTML-kode dynamisk ved å bruke innerHTML Property
For å skrive HTML-kode dynamisk, bruk JavaScript ' indreHTML ' eiendom. Det er den enkleste tilnærmingen til å endre innholdet i et HTML-element. Den støtter alle nettlesere.
Syntaks
Følg den gitte syntaksen for å bruke innerHTML-egenskapen:
indreHTML = 'tekst'Eksempel
I HTML-filen oppretter du først en knapp som kaller den definerte funksjonen ' overskrift() ' i JavaScript på klikkhendelsen:
< knappen ved å klikke = 'overskrift()' > Klikk her knapp >Lag et avsnitt med
-taggen der teksten vises fra JavaScript og tilordne en id til den:
< p id = 'overskrift' > s >Definer en funksjon ' overskrift() ' i en JavaScript-fil. Få referansen til HTML-elementet ved å bruke dets tilordnede id ved hjelp av ' getElementById() '-metoden og bruk en ' indreHTML ' eiendom på den:
funksjonsoverskrift ( ) {dokument. getElementById ( 'overskrift' ) . indreHTML = '
Velkommen til Linuxhint
' ;}
Produksjon
Vi har samlet all viktig informasjon knyttet til å skrive HTML-koden dynamisk ved hjelp av JavaScript.
Konklusjon
For å skrive HTML-kode dynamisk i JavaScript, bruk ' document.createElement() '-metoden med ' textContent ' eiendom eller ' indreHTML ' eiendom. I den første metoden trenger du ingen HTML-kode, mens i innerHTML-egenskapen må du få tilgang til HTML-elementet og utføre en operasjon på det. I denne opplæringen beskrev vi metodene for å skrive HTML-kode ved å bruke JavaScript dynamisk.