Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan 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">
  
    <script>
      function changeDivContent() { /* ... */ }
    </script>
  
  
    <input type="radio" name="radiobutton" value="A" onclick="changeDivContent()">
    <input type="radio" name="radiobutton" value="B" onclick="changeDivContent()">
    <div id="content"></div>
  
</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!