Tutorial jQuery untuk menambahkan tag secara dinamik pada div

jQuery ialah perpustakaan JavaScript yang digunakan secara meluas dalam pembangunan bahagian hadapan Ia menyediakan banyak kaedah untuk memudahkan operasi DOM, membolehkan pembangun mengendalikan elemen HTML dengan lebih cekap. Dalam pembangunan bahagian hadapan, kami sering menghadapi situasi di mana kami perlu menambah teg secara dinamik pada halaman, terutamanya apabila membangunkan halaman web yang sangat interaktif. Artikel ini akan membincangkan cara menggunakan jQuery untuk menambahkan teg secara dinamik dalam div dan memberikan contoh kod khusus.

1. Perkenalkan jQuery

Sebelum anda mula menggunakan jQuery, anda perlu memperkenalkan perpustakaan jQuery terlebih dahulu ke dalam fail HTML. Anda boleh memperkenalkan jQuery dengan meletakkan kod berikut dalam teg

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

Dengan cara ini anda boleh menggunakan fungsi jQuery untuk memanipulasi elemen halaman.

2 Menambah teg secara dinamik pada div

Seterusnya, kami akan menunjukkan cara menggunakan jQuery untuk menambahkan teg secara dinamik pada elemen

<div id="example">
    <!-- 这里是要添加标签的div -->
</div>

$(document).ready(function(){
    // 找到id为example的div元素，并向其中添加一个p标签
    $("#example").append("<p>动态添加的段落标签</p>");
});

<div id="example2">
    <!-- 这里是要添加标签的div -->
</div>

$(document).ready(function(){
    // 创建一个button标签，并设置样式，然后添加到id为example2的div元素中
    var button = $("<button>点击我</button>");
    button.css({"background-color": "blue", "color": "white", "padding": "10px"});
    $("#example2").append(button);
});