Tämä opetusohjelma kuvaa menetelmiä kirjoittaa HTML-koodia dynaamisesti JavaScriptin avulla.
Kuinka kirjoittaa HTML-koodi dynaamisesti JavaScriptin avulla?
Voit kirjoittaa HTML-koodin JavaScriptin avulla seuraavilla tavoilla:
Tapa 1: Kirjoita HTML-koodi dynaamisesti käyttämällä document.createElement() -menetelmää
JavaScriptin ' document.createElement() ' menetelmällä ' tekstisisältö ” -ominaisuutta käytetään HTML-koodin kirjoittamiseen JavaScriptiin dynaamisesti. CreateElement()-menetelmällä voit luoda tietyn HTML-elementin ja textContent-ominaisuutta käytetään tekstisisällön asettamiseen.
Syntaksi
Käytä annettua syntaksia luodaksesi HTML-elementin JavaScriptiin:
asiakirja. CreateElement ( 'merkin nimi' )
Esimerkki
Tässä luomme ensin kappaleen JavaScript-tiedostoon käyttämällä HTML
-tunnistetta, joka välitetään ' createElement() 'menetelmä:
konst teksti = asiakirja. CreateElement ( 'p' ) ;Käytä textContent-ominaisuutta asettaaksesi tekstin kappaleeseen:
teksti. tekstisisältö = 'Tervetuloa Linuxhintiin' ;
Tulosta lopuksi verkkosivun teksti käyttämällä ' document.write() 'menetelmä:
asiakirja. kirjoittaa ( teksti. tekstisisältö ) ;Tässä voit nähdä, että lähdössä kirjoitamme onnistuneesti tekstin verkkosivulle JavaScriptin avulla:
Tapa 2: Kirjoita HTML-koodi dynaamisesti käyttämällä sisäistä HTML-ominaisuutta
Voit kirjoittaa HTML-koodin dynaamisesti käyttämällä JavaScriptiä ' innerHTML ” omaisuutta. Se on yksinkertaisin tapa muuttaa HTML-elementin sisältöä. Se tukee kaikkia selaimia.
Syntaksi
Käytä innerHTML-ominaisuutta noudattamalla annettua syntaksia:
innerHTML = 'teksti'Esimerkki
Luo ensin HTML-tiedostoon painike, joka kutsuu määritettyä funktiota ' otsikko() ” JavaScriptissä klikkaustapahtumassa:
< painiketta onclick = 'otsikko()' > Klikkaa tästä -painiketta >Luo kappale
-tunnisteen avulla, jossa teksti näytetään JavaScriptistä ja anna sille tunnus:
< p id = 'otsikko' > s >Määritä funktio ' otsikko() ' JavaScript-tiedostossa. Hae HTML-elementin viite käyttämällä sille määritettyä tunnusta '' getElementById() ' -menetelmää ja käytä ' innerHTML ”omaisuus siinä:
funktion otsikko ( ) {asiakirja. getElementById ( 'otsikko' ) . innerHTML = '
Tervetuloa Linuxhintiin
' ;}
Lähtö
Olemme koonneet kaikki olennaiset tiedot, jotka liittyvät HTML-koodin kirjoittamiseen dynaamisesti JavaScriptin avulla.
Johtopäätös
Jos haluat kirjoittaa HTML-koodin dynaamisesti JavaScriptissä, käytä ' document.createElement() ' menetelmällä ' tekstisisältö 'kiinteistö tai' innerHTML ” omaisuutta. Ensimmäisessä menetelmässä et tarvitse HTML-koodia, kun taas innerHTML-omaisuudessa sinun on käytettävä HTML-elementtiä ja suoritettava toiminto sille. Tässä opetusohjelmassa kuvailimme tapoja kirjoittaa HTML-koodia JavaScriptin avulla dynaamisesti.