Ta vadnica bo opisala metode za dinamično pisanje kode HTML z uporabo JavaScripta.
Kako dinamično napisati kodo HTML z uporabo JavaScripta?
Za pisanje kode HTML z uporabo JavaScripta uporabite naslednje metode:
1. način: dinamično pisanje kode HTML z uporabo metode document.createElement().
JavaScripta ' document.createElement() ' metoda z ' textContent ” se uporablja za dinamično pisanje kode HTML v JavaScript. Z metodo createElement() lahko ustvarite določen element HTML, lastnost textContent pa se uporablja za nastavitev besedilne vsebine.
Sintaksa
Uporabite podano sintakso za ustvarjanje elementa HTML v JavaScriptu:
dokument. createElement ( 'tagName' )
Primer
Tukaj bomo najprej ustvarili odstavek v datoteki JavaScript z uporabo oznake HTML
, posredovane v “ createElement() ” metoda:
konst besedilo = dokument. createElement ( 'p' ) ;Za nastavitev besedila v odstavku uporabite lastnost textContent:
besedilo. textContent = 'Dobrodošli v Linuxhintu' ;
Na koncu natisnite besedilo na spletni strani s pomočjo » document.write() ” metoda:
dokument. pisati ( besedilo. textContent ) ;Tukaj lahko vidite v izhodu, da uspešno pišemo besedilo na spletni strani z uporabo JavaScripta:
2. način: dinamično pisanje kode HTML z uporabo lastnosti innerHTML
Za dinamično pisanje kode HTML uporabite JavaScript “ notranjiHTML ” lastnina. To je najenostavnejši pristop za spreminjanje vsebine elementa HTML. Podpira vse brskalnike.
Sintaksa
Za uporabo lastnosti innerHTML sledite dani sintaksi:
notranjiHTML = 'besedilo'Primer
V datoteki HTML najprej ustvarite gumb, ki bo poklical definirano funkcijo ' naslov() « v JavaScriptu na dogodek klika:
< gumb na klik = 'naslov()' > Klikni tukaj gumb >Ustvarite odstavek z oznako
, kjer bo besedilo prikazano iz JavaScripta, in mu dodelite ID:
< p id = 'naslov' > str >Določite funkcijo ' naslov() ” v datoteki JavaScript. Pridobite referenco elementa HTML z uporabo dodeljenega ID-ja s pomočjo » getElementById() ' in uporabite ' notranjiHTML ” lastnina na njem:
funkcijski naslov ( ) {dokument. getElementById ( 'naslov' ) . notranjiHTML = '
Dobrodošli v Linuxhintu
' ;}
Izhod
Zbrali smo vse bistvene informacije v zvezi z dinamičnim pisanjem kode HTML z uporabo JavaScripta.
Zaključek
Za dinamično pisanje kode HTML v JavaScript uporabite » document.createElement() ' metoda z ' textContent » lastnina ali » notranjiHTML ” lastnina. Pri prvi metodi ne potrebujete kode HTML, medtem ko morate pri lastnosti innerHTML dostopati do elementa HTML in na njem izvesti operacijo. V tej vadnici smo opisali metode za dinamično pisanje kode HTML z uporabo JavaScripta.