Bir elemanı başka bir elemanın içine nasıl taşıyabilirim?

Bir DIV öğesini diğerinin içine taşımak istiyorum. Örneğin, bunu taşımak istiyorum (tüm alt öğeler dahil):

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

buna:

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

Böylece elimde bu var:

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
Edited question 2014ööp45öö3 Eylül 2014 в 3:45
Programlama
javascript html jquery
2009ösp14ös20 Ağustos 2009 в 8:14
113 görünümler
Çözüm

AppendTo]1 fonksiyonunu kullanmak isteyebilirsiniz (bu fonksiyon elemanın sonuna ekleme yapar):

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

Alternatif olarak prependTo fonksiyonunu kullanabilirsiniz (elemanın başına ekler):

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

Örnek:

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

appendTo main
prependTo main
Clonkex
Edited answer 2018ööp32öö24 Şubat 2018 в 12:32
Yorumlar (15)

Az önce kullandım:

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

Bunu buradan aldım.

Cᴏʀʏ
Edited answer 2015ösp55ös14 Temmuz 2015 в 2:55
Yorumlar (4)

Elemanınızı yerleştirmek istediğiniz div içinde içerik varsa ve elemanın ana içerikten sonra gösterilmesini istiyorsanız:

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

Elemanınızı yerleştirmek istediğiniz div içinde içerik varsa ve elemanı ana içerikten önce göstermek istiyorsanız:

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

Elemanınızı koymak istediğiniz div boşsa veya tamamen değiştirmek istiyorsanız:

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

Yukarıdakilerden herhangi birinden önce bir öğeyi çoğaltmak istiyorsanız:

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
Edited answer 2016ösp5ös23 Haziran 2016 в 11:05
Yorumlar (1)