Bagaimana untuk menambah dan memadam kandungan div secara dinamik dalam jquery

Dalam pembangunan bahagian hadapan, menggunakan jQuery untuk menambah atau mengalih keluar elemen halaman secara dinamik adalah keperluan yang sangat biasa. Artikel ini akan memperkenalkan cara menggunakan jQuery untuk menambah atau memadam kandungan div secara dinamik pada halaman.

1. Tambah kandungan div

Cara paling asas untuk menambah kandungan div ialah menggunakan kaedah tambah jQuery. Kaedah ini menambah elemen baharu pada penghujung elemen sedia ada.

Kod sampel adalah seperti berikut:

$(document).ready(function() {
    $("#addBtn").click(function() {
        $("#myDiv").append("<p>这是新的一行内容。</p>")
    });
});

Dalam kod sampel di atas, peristiwa dicetuskan dengan mengklik butang, menambah baris baru elemen p ke hujung elemen dengan id "myDiv". Elemen p ini mengandungi kandungan yang perlu ditambah, iaitu mana-mana teg html dan teks.

Jika anda perlu menambah berbilang baris kandungan, anda boleh menukar kandungan dalam kaedah tambah kod contoh di atas kepada kod html yang perlu ditambah. Anda juga boleh menggunakan gelung untuk menambah kandungan yang sama berulang kali, contohnya:

$(document).ready(function() {
    $("#addBtn").click(function() {
        for(var i = 0; i < 5; i++) {
            $("#myDiv").append("<p>这是新的一行内容。</p>");
        }
    });
});

Dalam kod contoh di atas, mengklik butang akan menambah 5 baris baharu elemen p ke hujung elemen dengan id "myDiv", satu untuk setiap baris Mengandungi kod html yang sama.

2. Padam kandungan div

Kaedah memadam kandungan div menggunakan jQuery juga sangat mudah.

1. kaedah alih keluar

Kaedah alih keluar boleh mengalih keluar elemen yang dipilih dan semua elemen anaknya. Kod sampel adalah seperti berikut:

$(document).ready(function() {
    $("#removeBtn").click(function() {
        $("#myDiv").remove();
    });
});

Dalam kod sampel di atas, mengklik butang akan memadamkan elemen dengan id "myDiv" dan semua elemen anaknya.

2. kaedah kosong

kaedah kosong boleh memadamkan semua elemen anak bagi elemen yang dipilih, tetapi mengekalkan elemen yang dipilih itu sendiri. Kod sampel adalah seperti berikut:

$(document).ready(function() {
    $("#emptyBtn").click(function() {
        $("#myDiv").empty();
    });
});

Dalam kod sampel di atas, mengklik butang akan mengekalkan elemen itu sendiri dengan id "myDiv", tetapi memadamkan semua elemen anak elemen tersebut.

3. Ringkasan

Melalui pengenalan di atas, kita dapat melihat bahawa adalah sangat mudah untuk menggunakan jQuery untuk menambah atau memadam kandungan div secara dinamik. Hanya gunakan kaedah tambah untuk menambah kandungan dan kaedah alih keluar atau kosong untuk memadam kandungan. Dalam projek sebenar, fungsi ini biasanya digunakan untuk memaparkan data secara dinamik, menambah dan memadam item borang, dsb. Pembangun boleh menggunakan dan melaraskan ciri ini dengan lebih banyak mengikut keperluan yang berbeza.

Atas ialah kandungan terperinci Bagaimana untuk menambah dan memadam kandungan div secara dinamik dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!