Bagaimana untuk menambah elemen secara berperingkat dalam jquery

Sebagai perpustakaan JavaScript yang popular, jQuery bukan sahaja boleh meningkatkan kecekapan pembangunan, tetapi juga menjadikan kod lebih mudah dan lebih mudah difahami. Apabila membangunkan halaman web, kami biasanya menggunakan jQuery untuk menambah, mengubah suai dan memadam elemen HTML.

Dalam banyak kes, kita perlu menambah elemen secara berperingkat, iaitu, menambah subelemen baharu pada elemen sedia ada. Pada masa ini, kaedah append() dan prepend() jQuery boleh berguna. Kedua-dua kaedah ini adalah salah satu kaedah yang paling biasa digunakan dalam jQuery Mereka boleh menambah elemen anak di hujung dan kepala elemen masing-masing.

Pertama sekali, kita perlu memahami penggunaan dan perbezaan kedua-dua kaedah ini. Kaedah

apend() dan prepend()

apend()

kaedah append() memasukkan kandungan selepas elemen anak terakhir bagi elemen sedia ada. Berikut ialah beberapa contoh kod:

$(document).ready(function(){
  $("p").append(" 这是新的内容。");
});

Ini akan menambah kandungan baharu pada semua

Jika anda ingin menambah kandungan baharu pada semua elemen dalam dokumen, anda boleh menggunakannya seperti ini:

$(document).ready(function(){
  $("*").append(" 这是新的内容。");
});

kaedah prepend()

prepend() ialah yang pertama dalam kaedah sedia ada elemen Sisipkan kandungan sebelum elemen anak. Berikut ialah beberapa contoh kod:

$(document).ready(function(){
  $("p").prepend(" 这是新的内容。");
});

Ini akan menambah kandungan baharu pada semua

Jika anda ingin menambah kandungan baharu pada semua elemen dalam dokumen, anda boleh menggunakannya seperti ini:

$(document).ready(function(){
  $("*").prepend(" 这是新的内容。");
});

Tambah elemen secara berperingkat

Jika kita perlu menambah elemen baharu pada elemen sedia ada Untuk elemen anak, anda boleh menggunakan kaedah append() atau prepend(). Berikut ialah beberapa contoh kod:

$(document).ready(function(){
  $(".container").append("<div> 这是新增的元素。</div>");
});

Ini akan menambah elemen baharu selepas elemen anak terakhir elemen dengan bekas nama kelas.

$(document).ready(function(){
  $(".container").prepend("<div> 这是新增的元素。</div>");
});

Ini akan menambah elemen baharu di hadapan anak pertama elemen dengan bekas nama kelas.

Jika kita perlu menambah elemen anak yang sama pada setiap elemen, kita boleh menggunakan kaedah each() untuk mengulang elemen satu demi satu dan menambahnya secara berperingkat.

$(document).ready(function(){
  $("p").each(function(){
    $(this).append(" 这是新增的内容。");
  });
});

Ini akan menambah kandungan yang sama pada setiap elemen

Kesimpulan

Apabila menambah elemen secara berperingkat, kita boleh menggunakan kaedah append() dan prepend() dalam jQuery. Kaedah ini menyediakan cara yang cepat dan mudah untuk mengubah suai elemen HTML. Kami juga boleh menggunakan kaedah each() untuk mengulangi berbilang elemen dan melaksanakan operasi yang sama. Ini boleh membantu kami membina halaman web yang kaya secara interaktif dengan cepat dan meningkatkan kecekapan pembangunan.

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