Bagaimana cara memindahkan elemen ke elemen lain?

1689

Saya ingin memindahkan satu elemen DIV ke dalam elemen yang lain. Misalnya, saya ingin memindahkan ini (termasuk semua anak):

<div id="source">
...
</div>

dalam hal ini:

<div id="destination">
...
</div>

jadi saya punya ini:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>

javascript jquery html Mark Richman
sumber

21

Cukup gunakan $ (target_element) .append (to_be_inserted_element);

Mohammad Areeb Siddiqui

2

Atau: destination.appendChild (sumber) menggunakan javascript biasa

luke

dapatkah kita mencapai ini menggunakan CSS? Apakah itu mungkin ?

RajKumar Samala

6

@RajKumarSamala CSS tidak dapat mengubah struktur HTML, hanya presentasinya.

Mark Richman

39

Pernah mencoba JavaScript biasa ... destination.appendChild(source);?

onclick = function(){ destination.appendChild(source); }

div{ margin: .1em; } 
#destination{ border: solid 1px red; }
#source {border: solid 1px gray; }

<!DOCTYPE html>
<html>

 <body>

  <div id="destination">
   ###
  </div>
  <div id="source">
   ***
  </div>

 </body>
</html>

Luaskan cuplikan

Bekim Bacaj
sumber

* seseorang mengawali acara global onclick cuplikan demo dengan kata kunci vardalam upayanya untuk meningkatkan pos - tetapi itu salah!

Bekim Bacaj

6

Sungguh menakjubkan bagaimana orang masih berpikir jQuery sama dengan JavaScript. Tidak perlu untuk jQuery lagi di 2017, sungguh.

nkkollaw

2

tidak perlu untuk jquery di 2017 tetapi kadang-kadang membantu untuk menggunakan sesuatu yang lebih ringan dan serupa untuk tugas yang Anda lakukan berulang-ulang di setiap proyek. saya menggunakan uang tunai sebagai cara mudah untuk mendengarkan dokumen. Sudah, window.load acara dengan cara yang ramah browser. mudah-peasy.

eballeste

1

Mengubah ini menjadi jawaban yang diterima, sekarang tahun 2020 :)

Mark Richman

1

Sungguh menakjubkan bagaimana orang masih berpikir jQuery sama dengan JavaScript. Tidak perlu jQuery lagi di tahun 2020, sungguh.

ii iml0sto1

1794

Anda mungkin ingin menggunakan appendTofungsi (yang menambah akhir elemen):

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

Atau Anda bisa menggunakan prependTofungsi (yang menambah awal elemen):

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

Contoh:

Tampilkan cuplikan kode

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

#main {
  border: 2px solid blue;
  min-height: 100px;
}

.moveMeIntoMain {
  border: 1px solid red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="main">main</div>
<div id="moveMeIntoMain" class="moveMeIntoMain">move me to main</div>

<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>

Luaskan cuplikan

Andrew Hare
sumber

23

Peringatan bahwa ini mungkin tidak berfungsi dengan benar di jQuery mobile, karena itu dapat membuat salinan elemen lainnya sebagai gantinya.

Jordan Reiter

32

apakah appenTo membuat salinan atau benar-benar memindahkan seluruh div ke tujuan? (karena jika itu disalin, itu akan membuat erro saat memanggil div dengan id)

50

Berikut ini adalah artikel yang bagus tentang Menghapus, Mengganti, dan Memindahkan Elemen di jQuery: elated.com/articles/jquery-removing-replacing-moving-elements

xhh

42

Perhatikan dokumentasi jQuery untuk appendTo menyatakan elemen tersebut dipindahkan: it will be moved into the target (not cloned) and a new set consisting of the inserted element is returned- api.jquery.com/appendto

John K

15

Anda tidak memindahkannya, hanya menambahkan. Jawaban di bawah ini melakukan MOVE yang tepat.

Aaron

913

solusi saya:

PINDAH:

jQuery("#NodesToMove").detach().appendTo('#DestinationContainerNode')

SALINAN:

jQuery("#NodesToMove").appendTo('#DestinationContainerNode')

Perhatikan penggunaan .detach (). Saat menyalin, berhati-hatilah agar Anda tidak menggandakan ID.

Alejandro Illecas
sumber

86

Jawaban Terbaik. Jawaban yang diterima membuat salinan, tidak memindahkan elemen seperti pertanyaan yang diajukan.

paulscode

97

Maaf, tetapi jawaban yang diterima Andrew Hare benar - pelepasannya tidak perlu. Cobalah di Pixic's JSFiddle di atas - jika Anda menghapus panggilan detach, ia bekerja persis sama, yaitu bergerak, BUKAN salinan. Inilah garpu dengan hanya satu perubahan: jsfiddle.net/D46y5 Seperti yang didokumentasikan dalam API: api.jquery.com/appendTo : "Jika elemen yang dipilih dengan cara ini dimasukkan ke satu lokasi di tempat lain di DOM, itu akan dipindahkan ke dalam target (tidak dikloning) dan set baru yang terdiri dari elemen yang dimasukkan dikembalikan "

John - Not A Number

8

@ John-NotANumber benar - lepaskan () tidak diperlukan di sini. Jawaban yang diterima ADALAH yang terbaik, Anda hanya perlu membaca dokumentasi dengan benar.

LeonardChallis

11

Dokumentasi appendTo juga mengatakan: "Namun, jika ada lebih dari satu elemen target, salinan kloning dari elemen yang dimasukkan akan dibuat untuk setiap target setelah yang pertama, dan set baru (elemen asli ditambah klon) dikembalikan.". Jadi dalam kasus umum, solusi ini BISA juga membuat salinan!

Vincent Pazeller

Bagus! Atau Anda dapat menggunakan ini untuk lebih spesifik tentang ke mana harus pindah$('#nodeToMove').insertAfter('#insertAfterThisElement');

Victor Augusto

108

Saya hanya menggunakan:

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

Yang saya ambil dari sini .

kjc26ster
sumber

7

Nah, melepaskan berguna ketika Anda ingin berpegang pada elemen dan masukkan kembali nanti, tetapi dalam contoh Anda, Anda memasukkannya kembali secara instan.

Tim Büthe

1

Saya khawatir saya tidak mengerti apa yang Anda maksud, dapatkah Anda memberikan kode sampel?

kjc26ster

1

Maksudku, sebelumnya, melepaskan elemen dari posisi aslinya dan menyisipkannya pada yang baru. Fungsi detach di sisi lain hanya melepaskan elemen yang dipilih dan Anda dapat menyimpannya dalam variabel untuk memasukkannya ke DOM pada titik waktu berikutnya. Masalahnya, panggilan pelepasan Anda tidak perlu. Hapus itu dan Anda akan mencapai efek yang sama.

Tim Büthe

1

Luar biasa bahwa pengeditan mengubah jawaban ini sepenuhnya ke titik di mana jawaban lain ditambahkan satu tahun kemudian (identik dengan yang asli) dan mendapat

800+ peningkatan

96

Bagaimana dengan solusi JavaScript ?

// Declare a fragment:
var fragment = document.createDocumentFragment();

// Append desired element to the fragment:
fragment.appendChild(document.getElementById('source'));

// Append fragment to desired element:
document.getElementById('destination').appendChild(fragment);

Coba lihat.

Ali Bassam
sumber

8

Mengapa menggunakan createDocumentFragment alih-alih hanya document.getElementById ('destination'). AppendChild (document.getElementById ('source'))?

Gunar Gessner

6

@ GunarC.Gessner dengan asumsi Anda perlu memodifikasi objek sumber sebelum menambahkannya ke objek tujuan, maka pendekatan terbaik adalah dengan menggunakan fragmen yang merupakan objek imajiner dan bukan bagian dari pohon DOM, Anda mendapatkan kinerja yang lebih baik ketika memodifikasi sumber objek ketika telah ditransisikan dari tempat asalnya (sekarang itu di dalam fragmen) daripada mengubahnya di tempat awalnya sebelum menambahkannya.

Ali Bassam

5

Saya ingin menambahkan relevansi menawarkan solusi murni JavaScript. Seharusnya tidak diasumsikan jQuery selalu digunakan

Alexander Fradiani

1

Pertanyaan: Dalam menambahkan simpul anak, apakah kita kehilangan peristiwa terlampir?

jimasun

1

Jawaban untuk pertanyaan saya sendiri adalah ya, itu memang menyimpan acara terlampir.

jimasun

95

Jika divtempat Anda ingin meletakkan elemen memiliki konten di dalamnya, dan Anda ingin elemen ditampilkan setelah konten utama:

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

Jika di divmana Anda ingin meletakkan elemen Anda memiliki konten di dalamnya, dan Anda ingin menampilkan elemen sebelum konten utama:

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

Jika divtempat Anda ingin meletakkan elemen Anda kosong, atau Anda ingin menggantinya seluruhnya:

$("#element").html('<div id="source">...</div>');

Jika Anda ingin menduplikasi elemen sebelum salah satu di atas:

$("#destination").append($("#source").clone());
// etc.

sbaaaang
sumber

Saya menemukan semua huruf tebal agak sulit dibaca, tetapi ini adalah jawaban yang paling informatif, sehingga mendapat saya upvote.

Michael Scheper

32

Kamu bisa menggunakan:

Untuk Menyisipkan Setelah,

jQuery("#source").insertAfter("#destination");

Untuk menyisipkan ke dalam elemen lain,

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

Subrahmanyam
sumber

20

Jika Anda ingin demo cepat dan detail lebih lanjut tentang cara Anda memindahkan elemen, coba tautan ini:

http://html-tuts.com/move-div-in-another-div-with-jquery

Ini adalah contoh singkat:

Untuk memindahkan DI ATAS elemen:

$('.whatToMove').insertBefore('.whereToMove');

Untuk memindahkan SETELAH elemen:

$('.whatToMove').insertAfter('.whereToMove');

Untuk bergerak di dalam suatu elemen, ABOVE SEMUA elemen di dalam wadah itu:

$('.whatToMove').prependTo('.whereToMove');

Untuk bergerak di dalam suatu elemen, SETELAH SEMUA elemen di dalam wadah itu:

$('.whatToMove').appendTo('.whereToMove');

Dan
sumber

19

Anda dapat menggunakan kode berikut untuk memindahkan sumber ke tujuan

 jQuery("#source")
       .detach()
       .appendTo('#destination');

coba kerja codepen

Tampilkan cuplikan kode

function move() {
 jQuery("#source")
   .detach()
   .appendTo('#destination');
}

#source{
  background-color:red;
  color: #ffffff;
  display:inline-block;
  padding:35px;
}
#destination{
  background-color:blue;
  color: #ffffff;
  display:inline-block;
  padding:50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="source">
I am source
</div>

<div id="destination">
I am destination
</div>

<button onclick="move();">Move</button>

Luaskan cuplikan

Subodh Ghulaxe
sumber

11

Pertanyaan lama tetapi sampai di sini karena saya perlu memindahkan konten dari satu wadah ke wadah lain termasuk semua pendengar acara .

jQuery tidak memiliki cara untuk melakukannya tetapi fungsi DOM standar appendChild tidak.

//assuming only one .source and one .target
$('.source').on('click',function(){console.log('I am clicked');});
$('.target')[0].appendChild($('.source')[0]);

Menggunakan appendChild menghapus .source dan menempatkannya ke dalam target termasuk pendengar acara: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

HMR
sumber

6

Anda juga dapat mencoba:

$("#destination").html($("#source"))

Tetapi ini akan sepenuhnya menimpa apa pun yang Anda miliki #destination.

Tamas
sumber

2

Dan hancurkan pendengar acara pada elemen yang dipindahkan.

Igor Pomaranskiy

4

Saya perhatikan kebocoran memori yang sangat besar & perbedaan kinerja antara insertAfter& afteratau insertBefore& before.. Jika Anda memiliki banyak elemen DOM, atau Anda perlu menggunakan after()atau before()di dalam acara MouseMove , memori browser mungkin akan meningkat dan operasi berikutnya akan berjalan sangat lambat.

Solusi yang baru saja saya alami adalah menggunakan inserBefore sebagai gantinya before()dan masukkanAfter sebagai gantinya after().

spetsnaz
sumber

Ini terdengar seperti masalah yang tergantung pada implementasi mesin JavaScript. Dengan versi browser dan mesin JS mana Anda melihatnya?

Mark Richman

1

Saya menggunakan Chrome versi 36.0.1985.125 dan menggunakan jQuery v1.11.1. Saya mengikat fungsi pada acara mousemove, yang memindahkan DIV sederhana untuk turun atau naik elemen yang mouse sudah berakhir. Karenanya, acara & fungsi ini berjalan saat Anda menarik kursor. Kebocoran memori terjadi dengan setelah () dan sebelum (), jika Anda memindahkan kursor Anda untuk 30sec +, dan itu hilang jika saya hanya menggunakan insertAfter & insertBefore gantinya.

spetsnaz

1

Saya akan membuka bug dengan Google untuk yang itu.

Mark Richman

2

Anda dapat menggunakan JavaScript murni, menggunakan appendChild()metode ...

Metode appendChild () menambahkan sebuah simpul sebagai anak terakhir dari sebuah simpul.

Tip: Jika Anda ingin membuat paragraf baru, dengan teks, ingatlah untuk membuat teks sebagai simpul teks yang Anda tambahkan ke paragraf, lalu tambahkan paragraf ke dokumen.

Anda juga dapat menggunakan metode ini untuk memindahkan elemen dari satu elemen ke elemen lainnya.

Tip: Gunakan metode insertBefore () untuk menyisipkan simpul anak baru sebelum simpul anak yang ditentukan, sudah ada.

Jadi Anda dapat melakukan itu untuk melakukan pekerjaan itu, inilah yang saya buat untuk Anda, menggunakan appendChild(), menjalankan dan melihat cara kerjanya untuk kasus Anda:

function appendIt() {
  var source = document.getElementById("source");
  document.getElementById("destination").appendChild(source);
}

#source {
  color: white;
  background: green;
  padding: 4px 8px;
}

#destination {
  color: white;
  background: red;
  padding: 4px 8px;
}

button {
  margin-top: 20px;
}

<div id="source">
  <p>Source</p>
</div>

<div id="destination">
  <p>Destination</p>
</div>

<button onclick="appendIt()">Move Element</button>

Luaskan cuplikan

Alireza
sumber

0

Demi kelengkapan, ada pendekatan lain wrap() atau wrapAll()disebutkan dalam artikel ini . Jadi pertanyaan OP mungkin dapat diselesaikan dengan ini (yaitu, dengan asumsi <div id="destination" />belum ada, pendekatan berikut akan membuat pembungkus dari awal - OP tidak jelas tentang apakah pembungkus tersebut sudah ada atau tidak):

$("#source").wrap('<div id="destination" />')
// or
$(".source").wrapAll('<div id="destination" />')

Kedengarannya menjanjikan. Namun, ketika saya coba lakukan $("[id^=row]").wrapAll("<fieldset></fieldset>")pada beberapa struktur bersarang seperti ini:

<div id="row1">
    <label>Name</label>
    <input ...>
</div>

Itu benar membungkus mereka <div>...</div>dan <input>...</input>TETAPI BEBERAPA DAUN DARI<label>...</label> . Jadi saya akhirnya menggunakan yang eksplisit $("row1").append("#a_predefined_fieldset")sebagai gantinya. Jadi, YMMV.

RayLuo
sumber

0

perbaikan ukuran kotor jawaban Bekim Bacaj

div { border: 1px solid ; margin: 5px }

<div id="source" onclick="destination.appendChild(this)">click me</div>
<div id="destination" >...</div>

Luaskan cuplikan

Kamil Kiełczewski
sumber

Bagaimana cara memindahkan elemen ke elemen lain?

Jawaban: