Semua Yang Anda Perlu Tahu Mengenai HTML Dalaman dalam JavaScript

JavaScript adalah salah satu bahasa pengaturcaraan yang paling banyak digunakan. Ia juga cukup popular kerana fleksibiliti di platform. Terdapat pelbagai sifat di yang menjadikan kerja membina laman web dinamik lebih mudah. Dalam artikel ini, kita akan membincangkan HTML Dalaman dalam JavaScript dalam urutan berikut:

• Pengenalan kepada JavaScript
• HTML dalaman dalam JavaScript
  • Senarai teratur atau tidak tersusun
  • Menukar URL

Pengenalan kepada JavaScript

JavaScript digunakan sebagai bahasa pengaturcaraan sisi klien dan juga bahasa pengaturcaraan sisi pelayan. digunakan untuk melaksanakan di sisi pelanggan dan juga pelayan dari sebarang aplikasi. Node juga boleh disebut sebagai Node.js di beberapa tempat.

bila hendak menggunakan java ini

JavaScript menyediakan banyak kaedah agar beberapa fungsi dapat dilakukan dengan mudah. Inilah yang menjadikan JavaScript sebagai salah satu bahasa pengaturcaraan yang paling popular dan juga digunakan secara meluas di beberapa jenis pengembangan produk.

HTML dalaman dalam JavaScript

Yang dalam harta dalam JavaScript adalah salah satu ciri yang sangat berguna dan digunakan secara meluas untuk memberikan aspek yang lebih dinamik dan serba boleh ke laman web yang dibuat.

Sekiranya kita cuba menjelaskan innerHTML maka pekerjaan yang dilakukan oleh innerHTML hanyalah memuatkan kandungan halaman tanpa memuat semula keseluruhan halaman. Ini menjimatkan penggunaan data serta masa di sebalik pemuatan halaman dan sangat senang diperoleh. Ini memberi pengguna rasa yang cepat dan responsif sehingga menjadikan pengalaman pengguna jauh lebih baik.

Kedengarannya agak sukar tetapi mari kita cuba memahaminya dengan bantuan contoh.

Contoh:

 
Klik di sini untuk menukar teks HTML dalam.
fungsi myFunction () {document.getElementById ('paragraph1'). innerHTML = 'Perenggan berubah!' }

Di sini dalam kod di atas, dalam tag perenggan id itu adalah perenggan1.

Ada fungsi bernama myfunction () yang akan dicabut apabila klik pada teks 'Klik di sini untuk menukar teks HTML dalam'.Ketika fungsi dicabut setelah klik, fungsi tersebut akan dijalankan yang mengatakan getElementById ('ayat1'), yang menyatakan elemen dengan Id sebagai demo harus dipilih.

Lebih jauh lagi, kami mempunyai fungsi innerHTML yang hanya bermaksud setelah onclick apa yang harus dilakukan. Di sini dalam contoh di atas, hanya 'Paragraf Berubah'.

Berikut adalah output awal kod di atas.

Di bawah ini adalah output yang berubah setelah klik.

HTML dalaman dengan senarai yang tersusun atau tidak tersusun

Di bawah ini adalah contoh untuk menunjukkan penggunaan innerHTML dengan senarai yang tersusun atau tidak tersusun.

Contoh:

 
 
Helo
 
Hello lagi
 
 
Klik butang di bawah untuk mendapatkan kandungan elemen ul.
Cubalah fungsinya helloFunction () {var x = document.getElementById ('myList'). InnerHTML document.getElementById ('paragraph1'). InnerHTML = x}

Di sini innerHTML dipicu oleh butang yang ditentukan oleh nama 'Cubalah'.

tetapkan java classpath di linux

Output awal teks di atas adalah:

Hasil selepas klik pada butang. Klik pada butang tidak menyebabkan muat semula halaman tetapi disebabkan oleh penggunaan HTML dalam.

adalah array objek dalam java

InnerHTML untuk menukar URL

Berikut adalah contoh lain yang menunjukkan penggunaan innerHTML untuk menukar URL pada klik butang.

Contoh:

  Wikipedia Tukar fungsi pautan myFunction () {document.getElementById ('myAnchor'). InnerHTML = 'Google' document.getElementById ('myAnchor'). Href = 'https://www.google.com' document.getElementById ('myAnchor') ) .target = '_blank'}

Contoh di atas pada awalnya memberikan pautan ke laman web Wikipedia tetapi apabila butang diklik pautan akan bertukar ke Google.

Terdapat beberapa operasi seperti di mana innerHTML berguna apabila halaman tidak dimuat semula dan hanya sebahagian yang akan dikemas kini.Ini menjimatkan masa, dan lebih sedikit usaha yang harus dilakukan untuk pendekatan ini.Kelebihan terbesar dalam HTML adalah pengalaman pengguna yang ditingkatkan dengan ciri ini.

Lihat oleh Edureka. Latihan Pensijilan Pembangunan Web akan membantu anda Mempelajari cara membuat laman web yang mengagumkan menggunakan HTML5, CSS3, Twitter Bootstrap 3, jQuery dan Google API dan menyebarkannya ke Amazon Simple Storage Service (S3).

Ada soalan untuk kami? Sila sebutkan di bahagian komen 'String Concatenation in JavaScript' dan kami akan menghubungi anda.