Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk Mengubah Kandungan Div Secara Dinamik Menggunakan JavaScript?

Patricia Arquette

Lepaskan： 2024-10-31 09:08:30

asal

368 orang telah melayarinya

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!