Bagaimana untuk menambahkan kod HTML pada div menggunakan JavaScript?-tutorial js-php.cn

Bagaimana untuk menambahkan kod HTML pada div menggunakan JavaScript?

王林

Lepaskan： 2023-09-06 12:09:02

ke hadapan

860 orang telah melayarinya

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

Salin selepas log masuk

Penjelasan

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

Pertama, kami akan mencipta elemen div -

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

Salin selepas log masuk

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>';
}

Salin selepas log masuk

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

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

Salin selepas log masuk

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>

Salin selepas log masuk

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!