Tutorial ini akan menerangkan kaedah untuk menulis kod HTML secara dinamik menggunakan JavaScript.
Bagaimana Menulis Kod HTML Secara Dinamik Menggunakan JavaScript?
Untuk menulis kod HTML menggunakan JavaScript, gunakan kaedah berikut:
Kaedah 1: Tulis Kod HTML Secara Dinamik Menggunakan Kaedah document.createElement().
JavaScript ' document.createElement() ' kaedah dengan ' kandungan teks sifat ” digunakan untuk menulis kod HTML dalam JavaScript secara dinamik. Menggunakan kaedah createElement(), anda boleh mencipta elemen HTML tertentu dan sifat textContent digunakan untuk menetapkan kandungan teks.
Sintaks
Gunakan sintaks yang diberikan untuk mencipta elemen HTML dalam JavaScript:
dokumen. createElement ( 'tagName' )
Contoh
Di sini, pertama, kami akan membuat perenggan dalam fail JavaScript menggunakan tag HTML
yang diluluskan dalam ' createElement() ' kaedah:
const teks = dokumen. createElement ( 'p' ) ;Gunakan sifat textContent untuk menetapkan teks dalam perenggan:
teks. kandungan teks = 'Selamat Datang Ke Linuxhint' ;
Akhir sekali, cetak teks pada halaman web menggunakan “ document.write() ' kaedah:
dokumen. menulis ( teks. kandungan teks ) ;Di sini, anda boleh lihat dalam output kami berjaya menulis teks pada halaman web menggunakan JavaScript:
Kaedah 2: Tulis Kod HTML Secara Dinamik Menggunakan InnerHTML Property
Untuk menulis kod HTML secara dinamik, gunakan JavaScript “ innerHTML ” harta benda. Ia adalah pendekatan paling mudah untuk menukar kandungan elemen HTML. Ia menyokong semua pelayar.
Sintaks
Ikuti sintaks yang diberikan untuk menggunakan sifat innerHTML:
innerHTML = 'teks'Contoh
Dalam fail HTML, pertama, buat butang yang akan memanggil fungsi yang ditentukan ' tajuk() ” dalam JavaScript pada acara klik:
< butang onclick = 'tajuk()' > Tekan di sini butang >Buat perenggan menggunakan teg
di mana teks akan ditunjukkan daripada JavaScript dan berikan id kepadanya:
< p id = 'tajuk' > hlm >Tentukan fungsi ' tajuk() ” dalam fail JavaScript. Dapatkan rujukan elemen HTML menggunakan id yang ditetapkan dengan bantuan ' getElementById() ' kaedah dan gunakan ' innerHTML ” harta di atasnya:
tajuk fungsi ( ) {dokumen. getElementById ( 'tajuk' ) . innerHTML = '
Selamat Datang Ke Linuxhint
' ;}
Pengeluaran
Kami telah mengumpulkan semua maklumat penting yang berkaitan dengan menulis kod HTML secara dinamik menggunakan JavaScript.
Kesimpulan
Untuk menulis kod HTML secara dinamik dalam JavaScript, gunakan ' document.createElement() ' kaedah dengan ' kandungan teks ” harta atau “ innerHTML ” harta benda. Dalam kaedah pertama, anda tidak memerlukan sebarang kod HTML, manakala dalam sifat innerHTML, anda perlu mengakses elemen HTML dan melakukan operasi padanya. Dalam tutorial ini, kami menerangkan kaedah untuk menulis kod HTML menggunakan JavaScript secara dinamik.