Ilalarawan ng tutorial na ito ang mga paraan para dynamic na magsulat ng HTML code gamit ang JavaScript.
Paano Sumulat ng HTML Code na Dynamically Gamit ang JavaScript?
Upang magsulat ng HTML code gamit ang JavaScript, gamitin ang mga sumusunod na pamamaraan:
Paraan 1: Dynamically Sumulat ng HTML Code Gamit ang document.createElement() Method
ng JavaScript' document.createElement() 'paraan na may ' textContent Ang ” property ay ginagamit upang magsulat ng HTML code sa JavaScript nang pabago-bago. Gamit ang paraan ng createElement(), maaari kang lumikha ng isang partikular na elemento ng HTML, at ang pag-aari ng textContent ay ginagamit upang itakda ang nilalaman ng teksto.
Syntax
Gamitin ang ibinigay na syntax upang lumikha ng HTML element sa JavaScript:
dokumento. createElement ( 'tagName' )
Halimbawa
Dito, una, gagawa kami ng isang talata sa isang JavaScript file gamit ang HTML
tag na ipinasa sa isang “ createElement() 'paraan:
const text = dokumento. createElement ( 'p' ) ;Gamitin ang textContent property para itakda ang text sa isang talata:
text. textContent = 'Maligayang Pagdating sa Linuxhint' ;
Panghuli, i-print ang teksto sa webpage gamit ang “ document.write() 'paraan:
dokumento. magsulat ( text. textContent ) ;Dito, makikita mo sa output na matagumpay naming naisulat ang teksto sa web page gamit ang JavaScript:
Paraan 2: Sumulat ng HTML Code nang Dynamically Gamit ang innerHTML Property
Upang dynamic na magsulat ng HTML code, gamitin ang JavaScript ' innerHTML ” ari-arian. Ito ang pinakasimpleng diskarte upang baguhin ang nilalaman ng isang elemento ng HTML. Sinusuportahan nito ang lahat ng mga browser.
Syntax
Sundin ang ibinigay na syntax upang magamit ang innerHTML property:
innerHTML = 'text'Halimbawa
Sa HTML file, una, lumikha ng isang pindutan na tatawag sa tinukoy na function na ' heading() ” sa JavaScript sa kaganapan ng pag-click:
< button sa pag-click = 'heading()' > Pindutin dito pindutan >Gumawa ng talata gamit ang
tag kung saan ipapakita ang text mula sa JavaScript at magtalaga ng id dito:
< p id = 'heading' > p >Tukuyin ang isang function ' heading() ” sa isang JavaScript file. Kunin ang reference ng HTML element gamit ang nakatalagang id nito sa tulong ng “ getElementById() 'paraan at maglapat ng ' innerHTML ” ari-arian dito:
heading ng function ( ) {dokumento. getElementById ( 'heading' ) . panloobHTML = '
Maligayang Pagdating sa Linuxhint
' ;}
Output
Inipon namin ang lahat ng mahahalagang impormasyon na may kaugnayan sa pagsulat ng HTML code nang pabago-bago gamit ang JavaScript.
Konklusyon
Upang dynamic na magsulat ng HTML code sa JavaScript, gamitin ang “ document.createElement() 'paraan na may ' textContent ' ari-arian o ang ' panloobHTML ” ari-arian. Sa unang paraan, hindi mo kailangan ng anumang HTML code, habang sa innerHTML property, kailangan mong i-access ang HTML element at magsagawa ng operasyon dito. Sa tutorial na ito, inilarawan namin ang mga pamamaraan sa pagsulat ng HTML code gamit ang JavaScript nang pabago-bago.