Tento tutoriál popisuje metody dynamického psaní HTML kódu pomocí JavaScriptu.
Jak psát HTML kód dynamicky pomocí JavaScriptu?
Chcete-li napsat kód HTML pomocí JavaScriptu, použijte následující metody:
Metoda 1: Zápis HTML kódu dynamicky pomocí metody document.createElement().
JavaScript' document.createElement() “ metoda s “ textObsah ” se používá k dynamickému zápisu HTML kódu v JavaScriptu. Pomocí metody createElement() můžete vytvořit určitý prvek HTML a vlastnost textContent se používá k nastavení obsahu textu.
Syntax
Použijte danou syntaxi k vytvoření prvku HTML v JavaScriptu:
dokument. createElement ( 'název štítku' )
Příklad
Zde nejprve vytvoříme odstavec v souboru JavaScript pomocí značky HTML
předané v „ createElement() “ metoda:
konst text = dokument. createElement ( 'p' ) ;Pomocí vlastnosti textContent nastavte text v odstavci:
text. textObsah = 'Vítejte v Linuxhint' ;
Nakonec vytiskněte text na webové stránce pomocí „ document.write() “ metoda:
dokument. psát si ( text. textObsah ) ;Zde můžete ve výstupu vidět, že úspěšně píšeme text na webovou stránku pomocí JavaScriptu:
Metoda 2: Zápis HTML kódu dynamicky pomocí vlastnosti innerHTML
Chcete-li psát HTML kód dynamicky, použijte JavaScript “ vnitřní HTML ' vlastnictví. Je to nejjednodušší způsob, jak změnit obsah prvku HTML. Podporuje všechny prohlížeče.
Syntax
Chcete-li použít vlastnost innerHTML, postupujte podle uvedené syntaxe:
vnitřní HTML = 'text'Příklad
V souboru HTML nejprve vytvořte tlačítko, které bude volat definovanou funkci „ nadpis() ” v JavaScriptu při události kliknutí:
< tlačítko onclick = 'nadpis()' > Klikněte zde knoflík >Vytvořte odstavec pomocí značky
, kde se zobrazí text z JavaScriptu, a přiřaďte mu id:
< p id = 'nadpis' > p >Definujte funkci ' nadpis() “ v souboru JavaScript. Získejte odkaz na prvek HTML pomocí jeho přiřazeného id pomocí „ getElementById() “ metodu a použijte “ vnitřní HTML “ vlastnost na něm:
nadpis funkce ( ) {dokument. getElementById ( 'nadpis' ) . vnitřní HTML = '
Vítejte v Linuxhint
' ;}
Výstup
Sestavili jsme všechny podstatné informace týkající se psaní HTML kódu dynamicky pomocí JavaScriptu.
Závěr
Chcete-li psát HTML kód dynamicky v JavaScriptu, použijte „ document.createElement() “ metoda s “ textObsah nemovitost nebo vnitřní HTML ' vlastnictví. V první metodě nepotřebujete žádný kód HTML, zatímco ve vlastnosti innerHTML musíte přistupovat k prvku HTML a provést s ním operaci. V tomto tutoriálu jsme popsali metody dynamického psaní kódu HTML pomocí JavaScriptu.