Tutorial ini akan menjelaskan metode untuk menulis kode HTML secara dinamis menggunakan JavaScript.
Bagaimana Cara Menulis Kode HTML Secara Dinamis Menggunakan JavaScript?
Untuk menulis kode HTML menggunakan JavaScript, gunakan metode berikut:
Metode 1: Menulis Kode HTML Secara Dinamis Menggunakan Metode document.createElement()
JavaScript ' document.createElement() ” metode dengan “ teksKonten ” properti digunakan untuk menulis kode HTML dalam JavaScript secara dinamis. Menggunakan metode createElement() , Anda dapat membuat elemen HTML tertentu, dan properti textContent digunakan untuk menyetel konten teks.
Sintaksis
Gunakan sintaks yang diberikan untuk membuat elemen HTML dalam JavaScript:
dokumen. createElement ( 'namatag' )
Contoh
Di sini, pertama-tama, kita akan membuat paragraf dalam file JavaScript menggunakan tag HTML
yang diteruskan dengan “ buatElemen() ' metode:
const teks = dokumen. createElement ( 'p' ) ;Gunakan properti textContent untuk menyetel teks dalam paragraf:
teks. teksKonten = 'Selamat Datang Di Linuxhint' ;
Terakhir, cetak teks di halaman web menggunakan “ dokumen.tulis() ' metode:
dokumen. menulis ( teks. teksKonten ) ;Di sini, Anda dapat melihat pada output kami berhasil menulis teks di halaman web menggunakan JavaScript:
Metode 2: Tulis Kode HTML Secara Dinamis Menggunakan Properti innerHTML
Untuk menulis kode HTML secara dinamis, gunakan JavaScript “ innerHTML ' Properti. Ini adalah pendekatan paling sederhana untuk mengubah konten elemen HTML. Ini mendukung semua browser.
Sintaksis
Ikuti sintaks yang diberikan untuk menggunakan properti innerHTML:
innerHTML = 'teks'Contoh
Di file HTML, pertama, buat tombol yang akan memanggil fungsi yang ditentukan “ menuju() ” dalam JavaScript pada acara klik:
< klik tombol = 'menuju()' > Klik disini tombol >Buat paragraf menggunakan tag
di mana teks akan ditampilkan dari JavaScript dan tetapkan id untuk itu:
< p id = 'menuju' > p >Tentukan fungsi “ menuju() ” dalam file JavaScript. Dapatkan referensi elemen HTML menggunakan id yang ditetapkan dengan bantuan “ getElementById() ” metode dan menerapkan “ innerHTML ” properti di atasnya:
judul fungsi ( ) {dokumen. getElementById ( 'menuju' ) . innerHTML = '
Selamat Datang Di Linuxint
' ;}
Keluaran
Kami telah mengumpulkan semua informasi penting terkait penulisan kode HTML secara dinamis menggunakan JavaScript.
Kesimpulan
Untuk menulis kode HTML secara dinamis dalam JavaScript, gunakan “ document.createElement() ” metode dengan “ teksKonten ' properti atau ' innerHTML ' Properti. Pada metode pertama, Anda tidak memerlukan kode HTML apa pun, sedangkan pada properti innerHTML, Anda perlu mengakses elemen HTML dan melakukan operasi di dalamnya. Dalam tutorial ini, kami menjelaskan metode untuk menulis kode HTML menggunakan JavaScript secara dinamis.