See õpetus kirjeldab meetodeid HTML-koodi dünaamiliseks kirjutamiseks JavaScripti abil.
Kuidas JavaScripti abil dünaamiliselt HTML-koodi kirjutada?
HTML-koodi kirjutamiseks JavaScripti abil kasutage järgmisi meetodeid.
1. meetod: kirjutage HTML-kood dünaamiliselt, kasutades meetodit document.createElement().
JavaScripti ' document.createElement() ' meetod koos ' tekstSisu ” atribuuti kasutatakse JavaScriptis HTML-koodi dünaamiliseks kirjutamiseks. Meetodit createElement() kasutades saab luua kindla HTML-i elemendi ning teksti sisu määramiseks kasutatakse atribuuti textContent.
Süntaks
Kasutage antud süntaksit HTML-i elemendi loomiseks JavaScriptis:
dokument. looElement ( 'tagName' )
Näide
Siin loome kõigepealt JavaScripti failis lõigu, kasutades HTML
märgendit, mis edastatakse looElement() ” meetod:
konst tekst = dokument. looElement ( 'p' ) ;Lõigu teksti määramiseks kasutage atribuuti textContent:
tekst. tekstSisu = 'Tere tulemast Linuxhinti' ;
Lõpuks printige veebilehel olev tekst, kasutades ' document.write() ” meetod:
dokument. kirjutada ( tekst. tekstSisu ) ;Siin näete väljundis, et kirjutame JavaScripti abil veebilehele edukalt teksti:
2. meetod: kirjutage HTML-kood dünaamiliselt, kasutades sisemist HTML-i atribuuti
HTML-koodi dünaamiliseks kirjutamiseks kasutage JavaScripti ' sisemine HTML ” vara. See on lihtsaim viis HTML-i elemendi sisu muutmiseks. See toetab kõiki brausereid.
Süntaks
InnerHTML-i atribuudi kasutamiseks järgige antud süntaksit:
sisemine HTML = 'tekst'Näide
Esmalt looge HTML-failis nupp, mis kutsub määratletud funktsiooni ' pealkiri () ” JavaScriptis klõpsusündmusel:
< nupp onclick = 'pealkiri()' > Kliki siia nuppu >Looge märgendi
abil lõik, kus kuvatakse JavaScripti tekst, ja määrake sellele ID:
< p id = 'pealkiri' > lk >Määratlege funktsioon ' pealkiri () ” JavaScripti failis. Hankige HTML-elemendi viide, kasutades sellele määratud ID-d, kasutades ' getElementById() ' meetodit ja rakendage ' sisemine HTML sellel olev vara:
funktsiooni pealkiri ( ) {dokument. getElementById ( 'pealkiri' ) . sisemine HTML = '
Tere tulemast Linuxhinti
' ;}
Väljund
Oleme koostanud kogu olulise teabe, mis on seotud HTML-koodi dünaamilise kirjutamisega JavaScripti abil.
Järeldus
HTML-koodi dünaamiliseks kirjutamiseks JavaScriptis kasutage ' document.createElement() ' meetod koos ' tekstSisu ' vara või ' sisemine HTML ” vara. Esimese meetodi puhul ei vaja te HTML-koodi, samas kui sisemise HTML-i atribuudi puhul peate pääsema juurde HTML-elemendile ja tegema sellega toimingu. Selles õpetuses kirjeldasime meetodeid HTML-koodi dünaamiliseks kirjutamiseks JavaScripti abil.