Tambah tag secara dinamik pada div menggunakan jQuery-tutorial js-php.cn

Tambah tag secara dinamik pada div menggunakan jQuery

王林

Lepaskan： 2024-02-24 10:51:08

asal

621 orang telah melayarinya

Tambah tag secara dinamik pada div menggunakan jQuery

Dalam pembangunan web, jQuery ialah perpustakaan JavaScript yang biasa digunakan yang sangat memudahkan manipulasi DOM dan pengendalian acara. Dengan menggunakan jQuery secara fleksibel, kami boleh menambahkan teg secara dinamik dalam div dengan mudah dan meningkatkan pengalaman interaksi pengguna. Seterusnya, kami akan memperkenalkan cara menggunakan jQuery untuk mencapai fungsi ini, dengan contoh kod tertentu.

Pertama, kita perlu memperkenalkan perpustakaan jQuery ke dalam fail HTML. Ia boleh diperkenalkan melalui pautan CDN atau fail perpustakaan jQuery boleh dimuat turun secara tempatan. Selepas memperkenalkan jQuery, anda boleh mula menulis kod untuk menambahkan tag secara dinamik.

Kod sampel adalah seperti berikut:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>jQuery实现div中标签的动态添加</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style>
  .container {
    width: 80%;
    margin: 50px auto;
    padding: 20px;
    border: 1px solid #ccc;
  }
  button {
    padding: 10px 20px;
    margin: 10px;
    background-color: #3498db;
    color: white;
    border: none;
    cursor: pointer;
  }
</style>
</head>
<body>
<div class="container">
  <button id="addButton">点击添加标签</button>
</div>

<script>
$(document).ready(function() {
  $('#addButton').click(function() {
    $('.container').append('<p>动态添加的标签</p>');
  });
});
</script>
</body>
</html>

Salin selepas log masuk

Dalam kod ini, kami mencipta bekas div yang mengandungi butang. Apabila butang diklik, jQuery akan menambah tag p baharu pada bekas. Dengan cara ini, kami melaksanakan fungsi menambah teg secara dinamik dalam div.

Dengan pemilih jQuery dan fungsi pengendalian acara, kami boleh mencapai pelbagai kesan dinamik dengan mudah dan menambah lebih interaktiviti dan menarik kepada halaman web. Saya harap contoh di atas dapat membantu anda lebih memahami cara menggunakan jQuery secara fleksibel untuk menambahkan teg secara dinamik dalam div.

Atas ialah kandungan terperinci Tambah tag secara dinamik pada div menggunakan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!