JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan. Ini juga cukup populer karena keserbagunaannya di seluruh platform. Ada berbagai properti di yang mempermudah pekerjaan Anda dalam membuat situs web dinamis. Pada artikel kali ini, kita akan membahas tentang Inner HTML pada JavaScript dengan urutan sebagai berikut:
Pengantar JavaScript
JavaScript digunakan sebagai bahasa pemrograman sisi klien serta bahasa pemrograman sisi server. digunakan untuk mengeksekusi di sisi klien serta sisi server dari aplikasi apa pun. Node juga bisa disebut sebagai Node.js di beberapa tempat.
JavaScript menyediakan banyak metode untuk beberapa fungsi agar dapat dilakukan dengan mudah. Inilah yang menjadikan JavaScript sebagai salah satu bahasa pemrograman paling populer dan juga digunakan secara luas di beberapa jenis pengembangan produk.
HTML dalam di JavaScript
Batin properti di JavaScript adalah salah satu fitur yang sangat berguna dan digunakan secara luas untuk memberikan aspek yang lebih dinamis dan serbaguna ke halaman web yang sedang dibuat.
Jika kami mencoba menjelaskan innerHTML secara sederhana maka pekerjaan yang dilakukan oleh innerHTML hanyalah memuat konten halaman tanpa menyegarkan seluruh halaman. Ini menghemat penggunaan data serta waktu di belakang pemuatan halaman dan cukup mudah diperoleh. Ini memberi pengguna perasaan yang sangat cepat dan responsif sehingga membuat pengalaman pengguna jauh lebih baik.
Ini mungkin terdengar agak sulit tetapi mari kita coba untuk memahami ini dengan bantuan sebuah contoh.
Contoh:
Klik di sini untuk mengubah teks HTML dalam.
apa metode di javascriptfunction myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Paragraf berubah!' }
Di sini, di kode di atas, di tag paragraf id-nya adalah paragraf1.
Ada sebuah fungsi bernama myfunction () yang akan dicabut setelah mengklik teks 'Klik di sini untuk mengubah teks HTML dalam'.Ketika fungsi dicabut setelah diklik, fungsi akan dieksekusi yang mengatakan getElementById ('paragraf1'), yang menyatakan elemen dengan Id sebagai demo harus dipilih.
Selanjutnya, kami memiliki fungsi innerHTML yang berarti setelah onclick apa yang harus dilakukan. Di sini, di contoh di atas, hanya 'Paragraph Berubah'.
Di bawah ini adalah keluaran awal dari kode di atas.
apa itu acara javascript
Di bawah ini adalah keluaran yang diubah setelah klik.
HTML dalam dengan daftar berurutan atau tidak berurutan
Di bawah ini adalah contoh untuk menunjukkan penggunaan innerHTML dengan daftar terurut atau tidak berurutan.
Contoh:
- Halo
- Halo lagi
Klik tombol di bawah untuk mendapatkan konten dari elemen ul.
Cobalah fungsi helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}Di sini innerHTML dipicu oleh tombol yang ditentukan dengan nama 'Coba'.
Output awal dari teks di atas adalah:
Outputnya setelah klik tombol. Klik pada tombol tidak mengarah ke pemuatan ulang halaman, melainkan karena penggunaan innerHTML.
nilai default untuk string di java
InnerHTML untuk mengubah URL
Di bawah ini adalah contoh lain yang menunjukkan penggunaan innerHTML untuk mengubah URL pada klik tombol.
Contoh:
Wikipedia Ubah fungsi tautan myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor' ) .target = '_blank'}
Contoh di atas awalnya memberikan tautan ke situs web Wikipedia tetapi ketika tombol diklik, tautan itu berubah ke Google.
Ada beberapa operasi di mana innerHTML berguna ketika halaman tidak akan dimuat ulang dan hanya sebagian yang akan diperbarui.Ini menghemat waktu, serta lebih sedikit upaya, yang harus dilakukan untuk pendekatan tersebut.Keuntungan terbesar dari innerHTML adalah pengalaman pengguna yang ditingkatkan dengan fitur ini.
Lihat oleh Edureka. Pelatihan Sertifikasi Pengembangan Web akan membantu Anda mempelajari cara membuat situs web yang mengesankan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery, dan Google API, serta menerapkannya ke Amazon Simple Storage Service (S3).
Ada pertanyaan untuk kami? Harap sebutkan di bagian komentar 'Penggabungan String di JavaScript' dan kami akan menghubungi Anda kembali.