Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?

WBOY

Lepaskan： 2023-08-27 14:49:09

ke hadapan

748 orang telah melayarinya

如何使用 JavaScript 将数据附加到元素？

Kami boleh menggunakan JavaScript untuk menambahkan data pada elemen dengan menambahkan kandungan pada elemen menggunakan atribut .innerHTML. Ini boleh dilakukan dengan menggunakan operator += untuk menambah kandungan baharu pada kandungan sedia ada dalam . Kami juga boleh menambah elemen anak baharu untuk menggunakan kaedah .appendChild().

ialah elemen peringkat blok yang digunakan untuk membuat bahagian atau bahagian dalam dokumen HTML. Elemen biasanya digunakan untuk mengumpulkan elemen bersama-sama, seperti perenggan, tajuk atau imej. Elemen juga boleh digunakan untuk menggayakan sebahagian daripada dokumen, seperti menambah warna latar belakang atau jidar.

Kaedah

Untuk menambahkan data pada elemen div menggunakan JavaScript, anda perlu memilih elemen menggunakan pemilih terlebih dahulu dan kemudian menambah data pada elemen yang dipilih menggunakan kaedah append() atau appendChild().

Berikut ialah contoh cara menambahkan elemen perenggan pada elemen div -

var div = document.querySelector('div');
var p = document.createElement('p');
p.textContent = 'This is some data that will be appended to the div element';
div.appendChild(p);

Salin selepas log masuk

Contoh

Andaikan anda mempunyai div dengan id "kandungan" -

<!DOCTYPE html>
<html>
<head>
   <title>Append Data to DIV</title>
</head>
   <body>
      <div id='content'>
         <p style='color:black;'>I existed before</p>
      </div>
      <script>
         var div = document.getElementById('content');
         var p = document.createElement('p');
         p.style.color = 'black';
         p.textContent = 'I was appended to the div';
         div.appendChild(p);
      </script>
   </body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!