Rumah > Artikel > hujung hadapan web > Bagaimana untuk menambahkan kod HTML pada div menggunakan JavaScript?

Bagaimana untuk menambahkan kod HTML pada div menggunakan JavaScript?

王林ke hadapan: 2023-09-06 12:09:02772semak imbas

如何使用 JavaScript 将 HTML 代码附加到 div？

Untuk menambahkan kod HTML pada div menggunakan JavaScript, kita perlu memilih elemen div terlebih dahulu. Kita boleh melakukan ini dengan menggunakan kaedah document.getElementById() dan menghantar id elemen div. Seterusnya, kami menggunakan sifat innerHTML elemen div dan menetapkannya sama dengan kod HTML yang ingin kami tambahkan, didahului oleh operator +=.

kaedah

Salah satu cara untuk menambahkan kod HTML pada div menggunakan JavaScript ialah memilih div menggunakan idnya,

Kemudian tambah kod HTML yang diperlukan menggunakan atribut innerHTML. Contohnya -

var div = document.getElementById('myDiv');
div.innerHTML += '<p>This is some new HTML code</p>';

Penjelasan

Dalam contoh ini, kami akan menggunakan JavaScript untuk menambahkan kod HTML pada div.

Pertama, kami akan mencipta elemen div -

<div id="container"></div>

Seterusnya, kami akan mencipta fungsi untuk menambahkan kod HTML pada elemen div -

function appendHtml() {
   var div = document.getElementById('container');
   div.innerHTML += '<p>This is some HTML code</p>';
}

Akhir sekali, kami akan memanggil fungsi ini apabila halaman dimuatkan -

window.onload = function() {
   appendHtml();
}

Contoh

<!DOCTYPE html>
<html>
<head>
   <title>Append HTML Code</title>
</head>
   <body>
      <div id='container'></div>
      <script>    
         function appendHtml() {
            var div = document.getElementById('container');
            div.innerHTML += '<p style="color:black">This is some HTML code</p>';
         }       
         window.onload = appendHtml;
      </script>
   </body>
</html>

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

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menambah strok pada segi empat tepat menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menambah strok pada segi empat tepat menggunakan FabricJS?

Artikel berkaitan

Lihat lagi