Tento tutoriál popisuje metódy dynamického písania HTML kódu pomocou JavaScriptu.
Ako písať HTML kód dynamicky pomocou JavaScriptu?
Ak chcete napísať kód HTML pomocou JavaScriptu, použite nasledujúce metódy:
Metóda 1: Dynamický zápis HTML kódu pomocou metódy document.createElement().
JavaScript document.createElement() “ metóda s “ textObsah ” sa používa na dynamické písanie HTML kódu v JavaScripte. Pomocou metódy createElement() môžete vytvoriť určitý prvok HTML a vlastnosť textContent sa používa na nastavenie obsahu textu.
Syntax
Na vytvorenie prvku HTML v JavaScripte použite danú syntax:
dokument. createElement ( 'tagName' )
Príklad
Najprv vytvoríme odsek v súbore JavaScript pomocou značky HTML
odovzdanej v „ createElement() “ metóda:
konšt text = dokument. createElement ( 'p' ) ;Na nastavenie textu v odseku použite vlastnosť textContent:
text. textObsah = 'Vitajte v Linuxhint' ;
Nakoniec vytlačte text na webovej stránke pomocou „ document.write() “ metóda:
dokument. písať ( text. textObsah ) ;Tu môžete vo výstupe vidieť, že sme úspešne napísali text na webovú stránku pomocou JavaScriptu:
Metóda 2: Napíšte HTML kód dynamicky pomocou vlastnosti innerHTML
Ak chcete písať HTML kód dynamicky, použite JavaScript “ innerHTML ' nehnuteľnosť. Je to najjednoduchší prístup k zmene obsahu prvku HTML. Podporuje všetky prehliadače.
Syntax
Ak chcete použiť vlastnosť innerHTML, postupujte podľa uvedenej syntaxe:
innerHTML = 'text'Príklad
V súbore HTML najskôr vytvorte tlačidlo, ktoré bude volať definovanú funkciu „ nadpis () ” v JavaScripte pri udalosti kliknutia:
< tlačidlo onclick = 'nadpis()' > Kliknite tu tlačidlo >Vytvorte odsek pomocou značky
, kde sa zobrazí text z JavaScriptu a priraďte mu ID:
< p id = 'hlavička' > p >Definujte funkciu ' nadpis () “ v súbore JavaScript. Získajte referenciu prvku HTML pomocou jeho priradeného ID pomocou „ getElementById() “ a použite metódu “ innerHTML “vlastnosť na ňom:
nadpis funkcie ( ) {dokument. getElementById ( 'hlavička' ) . innerHTML = '
Vitajte v Linuxhint
' ;}
Výkon
Zozbierali sme všetky podstatné informácie súvisiace s písaním HTML kódu dynamicky pomocou JavaScriptu.
Záver
Ak chcete písať HTML kód dynamicky v JavaScripte, použite „ document.createElement() “ metóda s “ textObsah nehnuteľnosť alebo innerHTML ' nehnuteľnosť. V prvej metóde nepotrebujete žiadny kód HTML, zatiaľ čo vo vlastnosti innerHTML musíte pristupovať k prvku HTML a vykonať s ním operáciu. V tomto návode sme opísali metódy dynamického písania HTML kódu pomocou JavaScriptu.