Ovaj vodič će opisati metode dinamičkog pisanja HTML koda pomoću JavaScripta.
Kako dinamički pisati HTML kod koristeći JavaScript?
Za pisanje HTML koda pomoću JavaScripta koristite sljedeće metode:
1. metoda: dinamički napišite HTML kod pomoću metode document.createElement().
JavaScript's ' document.createElement() ' metoda s ' textContent ” Svojstvo se koristi za dinamičko pisanje HTML koda u JavaScriptu. Pomoću metode createElement() možete kreirati određeni HTML element, a svojstvo textContent služi za postavljanje sadržaja teksta.
Sintaksa
Koristite zadanu sintaksu za stvaranje HTML elementa u JavaScriptu:
dokument. createElement ( 'tagName' )
Primjer
Ovdje ćemo prvo stvoriti odlomak u JavaScript datoteci pomoću HTML
oznake proslijeđene u “ stvoritiElement() ” metoda:
konst tekst = dokument. createElement ( 'p' ) ;Upotrijebite svojstvo textContent za postavljanje teksta u odlomak:
tekst. textContent = 'Dobro došli u Linuxhint' ;
Na kraju ispišite tekst na web stranici koristeći ' document.write() ” metoda:
dokument. pisati ( tekst. textContent ) ;Ovdje možete vidjeti u izlazu da uspješno pišemo tekst na web stranici koristeći JavaScript:
Metoda 2: Dinamički napišite HTML kod koristeći innerHTML svojstvo
Za dinamičko pisanje HTML koda koristite JavaScript ' unutarnjiHTML ” vlasništvo. To je najjednostavniji pristup za promjenu sadržaja HTML elementa. Podržava sve preglednike.
Sintaksa
Slijedite zadanu sintaksu za korištenje svojstva innerHTML:
unutarnjiHTML = 'tekst'Primjer
U HTML datoteci prvo stvorite gumb koji će pozvati definiranu funkciju ' naslov() ” u JavaScriptu na događaj klika:
< gumb na klik = 'naslov()' > Kliknite ovdje dugme >Napravite odlomak pomoću
oznake gdje će se tekst prikazati iz JavaScripta i dodijelite mu ID:
< p id = 'naslov' > str >Definirajte funkciju ' naslov() ” u JavaScript datoteci. Dobijte referencu HTML elementa koristeći njegov dodijeljeni ID uz pomoć ' getElementById() ' i primijenite ' unutarnjiHTML ” vlasništvo na njemu:
naslov funkcije ( ) {dokument. getElementById ( 'naslov' ) . unutarnjiHTML = '
Dobro došli u Linuxhint
' ;}
Izlaz
Sakupili smo sve bitne informacije vezane uz dinamičko pisanje HTML koda pomoću JavaScripta.
Zaključak
Za dinamičko pisanje HTML koda u JavaScriptu koristite ' document.createElement() ' metoda s ' textContent ' vlasništvo ili ' unutarnjiHTML ” vlasništvo. U prvoj metodi ne treba vam nikakav HTML kod, dok u svojstvu innerHTML morate pristupiti HTML elementu i izvršiti operaciju na njemu. U ovom vodiču opisali smo metode dinamičkog pisanja HTML koda koristeći JavaScript.