Bagaimana untuk Menyarangkan Satu Elemen DOM Di Dalam Satu Lagi Menggunakan appendTo dan prependTo?

Menggerakkan Elemen DOM: Cara Menyusun Satu Elemen Dalam Satu Lagi

Dalam pembangunan web, sering kali menjadi perlu untuk memindahkan elemen dalam struktur DOM , sama ada atas sebab estetik atau fungsi. Satu keperluan sedemikian ialah memindahkan elemen DIV tertentu ke dalam elemen DIV sedia ada yang lain.

Masalah:

Andaikan anda mempunyai dua elemen DIV: "sumber" dan "destinasi." Anda ingin memindahkan "sumber" dan elemen anaknya ke "destinasi" supaya ia menjadi elemen bersarang "destinasi."

Penyelesaian:

Menggunakan appendTo:

Fungsi appendTo biasanya digunakan untuk memasukkan elemen pada penghujung elemen lain. Contohnya:

$("#source").appendTo("#destination");

Kaedah ini akan menambahkan "sumber" (termasuk kandungannya) pada ekor "destinasi."

Menggunakan prependTo:

Sebagai alternatif, fungsi prependTo menambah elemen pada permulaan elemen lain. Contohnya:

$("#source").prependTo("#destination");

Contoh:

Pertimbangkan coretan kod berikut:

<div>

$("#appendTo").click(function() {
  $("#moveMeIntoMain").appendTo($("#main"));
});
$("#prependTo").click(function() {
  $("#moveMeIntoMain").prependTo($("#main"));
});

Apabila butang "tambahKe" ditekan, "moveMeIntoMain" dilampirkan pada penghujung "utama." Mengklik butang "prependTo" memasukkan "moveMeIntoMain" pada permulaan "utama."

Atas ialah kandungan terperinci Bagaimana untuk Menyarangkan Satu Elemen DOM Di Dalam Satu Lagi Menggunakan appendTo dan prependTo?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!