cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?

Bagaimana untuk menambahkan data pada elemen menggunakan JavaScript?

WBOY
WBOYke hadapan
2023-08-27 14:49:09796semak imbas

如何使用 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);

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>

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!

JavaScript html 运算符 append innerHTML 选择器
Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?

Artikel berkaitan

Lihat lagi