Pertanyaan Bagaimana cara memindahkan elemen ke elemen lain?


Saya ingin memindahkan satu elemen DIV di dalam elemen lainnya. Sebagai contoh, saya ingin memindahkan ini (termasuk semua anak):

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

ke dalam ini:

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

jadi saya punya ini:

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

1427
2017-08-14 20:14


asal


Jawaban:


Anda mungkin ingin menggunakan appendTo function (yang menambah akhir dari elemen):

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

Atau Anda bisa menggunakan prependTo function (yang menambah awal elemen):

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

Contoh:

$("#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>


1576
2017-08-14 20:16



solusi saya:

PINDAH:

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

SALINAN:

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

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


779
2017-11-06 01:50



Saya baru saja menggunakan:

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

Yang saya ambil dari sini.


104
2017-07-24 18:51



Jika itu div di mana Anda ingin menempatkan elemen Anda memiliki konten di dalamnya, dan Anda ingin elemen tersebut ditampilkan setelah konten utama:

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

Jika itu div di mana Anda ingin menempatkan elemen Anda memiliki konten di dalamnya, dan Anda ingin menunjukkan elemen sebelum konten utama:

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

Jika itu div di mana Anda ingin menempatkan elemen Anda kosong, atau Anda ingin menggantikan itu sepenuhnya:

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

Jika Anda ingin menduplikasi elemen sebelum salah satu di atas:

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

81
2017-11-15 20:04



Bagaimana dengan JavaScript larutan?

Deklarasikan sebuah fragmen:

var fragment = document.createDocumentFragment();

Tambahkan elemen yang diinginkan ke fragmen:

fragment.appendChild(document.getElementById('source'));

Tambahkan fragmen ke elemen yang diinginkan:

document.getElementById('destination').appendChild(fragment);

Coba lihat.


65
2018-06-24 10:43



Kamu dapat memakai:

Untuk Menyisipkan Setelah,

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

Untuk Menyisipkan di dalam elemen lain,

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

27
2018-05-02 13:53



Pernah mencoba JavaScript polos ... 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>


18
2017-11-02 08:49



Anda dapat menggunakan kode berikut untuk memindahkan sumber ke tujuan

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

cobalah bekerja codepen

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>


16
2018-02-17 22:03