cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript?

Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript?

Patricia Arquette
Patricia Arquetteasal
2024-10-31 09:08:30356semak imbas

How to Dynamically Change Div Content Using JavaScript?

Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript

Mengubah kandungan elemen div dengan JavaScript boleh dicapai dengan pendekatan intuitif. Coretan kod HTML berikut berfungsi sebagai contoh:

<code class="html"><html>
  <head>
    <script>
      function changeDivContent() { /* ... */ }
    </script>
  </head>
  <body>
    <input type="radio" name="radiobutton" value="A" onClick="changeDivContent()">
    <input type="radio" name="radiobutton" value="B" onClick="changeDivContent()">
    <div id="content"></div>
  </body>
</html></code>

Dalam contoh ini, objektifnya adalah untuk mengubah suai kandungan HTML dalaman div#content berdasarkan pemilihan butang radio pengguna dengan nilai "A" atau "B." Walau bagaimanapun, elemen div tidak mempunyai "nilai" atribut JavaScript untuk memudahkan tindakan ini.

Untuk menangani perkara ini, JavaScript menyediakan penyelesaian yang mudah dengan menggunakan sifat HTML dalaman bagi elemen HTML. Dengan melaksanakan kod berikut:

<code class="js">document.getElementById("content").innerHTML = "whatever";</code>

dalam fungsi changeDivContent(), anda boleh menetapkan kandungan div#content secara dinamik kepada sebarang nilai yang dikehendaki. Ini membolehkan anda mengemas kini kandungan elemen div dengan lancar berdasarkan input pengguna atau keadaan dinamik lain dalam kod JavaScript anda.

Atas ialah kandungan terperinci Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

JavaScript html using Attribute Property function this innerHTML input
Kenyataan：
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Artikel sebelumnya：Bagaimana untuk Memeriksa Padanan Substring dengan Cekap daripada Array dalam JavaScript?Artikel seterusnya：Bagaimana untuk Memeriksa Padanan Substring dengan Cekap daripada Array dalam JavaScript?

Artikel berkaitan

Lihat lagi