Bir öğeyi başka bir öğeye nasıl taşıyabilirim?

1688

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

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

bunun içine:

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

böylece bu var:

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

javascript jquery html

— Mark Richman
kaynak

21

Sadece $ (target_element) .append (to_be_inserted_element) kullanın;

— Mohammad Areeb Siddiqui

2

Veya: düz javascript kullanarak destination.appendChild (kaynak)

— luke

CSS kullanarak bunu başarabilir miyiz? mümkün mü ?

— RajKumar Samala

6

@RajKumarSamala CSS HTML'nin yapısını değiştiremez, sadece sunumunu değiştirir.

— Mark Richman

38

Hiç düz JavaScript denediniz destination.appendChild(source);mi?

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>

Snippet'i genişlet

— Bekim Bacaj
kaynak

* Birisi, gönderiyi geliştirme girişiminde anahtar kelime ile demo snippet'in global etkinliğinin önüne geçti - ama bu yanlış! onclickvar

— Bekim Bacaj

6

İnsanların jQuery'nin JavaScript'e eşit olduğunu düşünmeleri şaşırtıcı. Gerçekten 2017'de jQuery'ye gerek yok.

— nkkollaw

2

2017'de jquery'ye gerek yok, ancak bazen her projede tekrar tekrar yaptığınızı bulduğunuz görevler için daha hafif ve benzer bir şey kullanmaya yardımcı olur. cash-dom'u document.ready, window.load olaylarını çapraz tarayıcı dostu bir şekilde dinlemenin kolay bir yolu olarak kullanıyorum. çantada keklik.

— eballeste

1

Bunu kabul edilen cevaba çevirerek, şimdi 2020 olduğu :)

— Mark Richman

1

İnsanların jQuery'nin JavaScript'e eşit olduğunu düşünmeleri şaşırtıcı. Gerçekten 2020'de jQuery'ye gerek yok.

— ii iml0sto1

1794

appendToİşlevi (öğenin sonuna eklenen) kullanmak isteyebilirsiniz :

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

Alternatif olarak prependTo(öğenin başına eklenen) işlevi kullanabilirsiniz :

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

Misal:

Kod snippet'ini göster

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

Snippet'i genişlet

— Andrew Hare
kaynak

23

Bunun, öğenin başka bir kopyasını oluşturabileceğinden jQuery mobile'da düzgün çalışmayabileceğine dair bir uyarı.

— Jordan Reiter

32

appenTo bir kopya oluşturmak veya tüm div hedef hedefe taşır? (çünkü kopyalanırsa div kimliğini

50

Burada Çıkarma değiştirilmesi ve jQuery Öğeleri Hareketli üzerinde mükemmel bir yazıdır: elated.com/articles/jquery-removing-replacing-moving-elements

— xhh

42

AppendTo için jQuery belgelerine dikkat edin Elemanın taşındığını belirtir: 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

Hareket ettirmiyorsunuz, sadece ekliyorsunuz. Aşağıdaki cevap uygun bir MOVE yapar.

— Aaron

913

çözümüm:

HAREKET:

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

KOPYA:

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

.Detach () kullanımını not alın. Kopyalama sırasında, kimlikleri çoğaltmamaya dikkat edin.

— Alejandro Illecas
kaynak

86

En iyi cevap. Kabul edilen cevap bir kopya oluşturur, öğeyi soru gibi hareket ettirmez.

— paulscode

97

Üzgünüz, ama Andrew Hare'in kabul ettiği cevap doğrudur - ayrılma gereksizdir. Yukarıdaki Pixic JSFiddle'da deneyin - ayırma çağrılarını kaldırırsanız, tamamen aynı şekilde çalışır, yani bir kopya değil, bir hareket yapar. İşte bu tek değişiklikle çatal: jsfiddle.net/D46y5 API'da belgelendiği gibi: api.jquery.com/appendTo : "Bu şekilde seçilen bir öğe DOM'da başka bir yerde tek bir konuma eklenirse , taşınacaktır hedefe (klonlanmamış) yerleştirilir ve eklenen elemandan oluşan yeni bir set döndürülür "

— John - A Number

8

@ John-NotANumber haklı - burada detach () gerekmez. Kabul edilen cevap en iyisidir, sadece belgeleri düzgün bir şekilde okumalısınız.

— LeonardChallis

11

AppendTo belgelerinde ayrıca: "Birden fazla hedef öğe varsa, ancak eklenen öğenin klonlanmış kopyaları ilk hedefin ardından her hedef için oluşturulur ve yeni küme (orijinal öğe artı klonlar) döndürülür.". Genel durumda, bu çözüm de kopya oluşturabilir!

— Vincent Pazeller

harika! Veya nereye taşınacağınız konusunda daha spesifik olmak için kullanabilirsiniz$('#nodeToMove').insertAfter('#insertAfterThisElement');

— Victor Augusto

108

Az önce kullandım:

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

Buradan aldım .

— kjc26ster
kaynak

7

Ayrılma, öğeye tutunup daha sonra yeniden yerleştirmek istediğinizde yararlıdır, ancak örneğinizde yine de anında yeniden yerleştirirsiniz.

— Tim Büthe

1

Korkarım tam olarak ne alıyorsanız groking değilim, örnek kod sağlayabilir misiniz?

— kjc26ster

1

Yani, prependTo, öğeyi orijinal konumundan ayırır ve yenisine ekler. Diğer taraftan ayırma işlevi seçili öğeyi ayırır ve daha sonraki bir zamanda DOM'a eklemek için bir değişkeni kaydedebilirsiniz. Mesele şu ki, ayrılma çağrınız gereksizdir. Çıkarın ve aynı etkiyi elde edersiniz.

— Tim Büthe

1

Düzenlemelerin bu cevabı bir yıl sonra başka bir cevabın eklendiği noktaya tamamen değiştirdiği inanılmaz (orijinaliyle aynı) ve 800+ upvotes var ...

— hlscalon

96

JavaScript çözümüne ne dersiniz ?

// 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);

Bunu kontrol et.

— Ali Bassam
kaynak

8

Neden sadece document.getElementById ('destination'). AppendChild (document.getElementById ('source')) yerine createDocumentFragment kullanılıyor?

— Gunar Gessner

6

@ GunarC.Gessner, kaynak nesneyi hedef nesneye eklemeden önce değiştirmeniz gerektiğini varsayarsak, en iyi yaklaşım, hayali bir nesne olan ve DOM ağacının bir parçası olmayan parçayı kullanmaktır. kaynak nesneyi, eklemeden önce ilk yerinde değiştirmek yerine orijinal yerine (şimdi parçanın içinde) geçirildiğinde.

— Ali Bassam

5

Bir JavaScript saf çözümü sunmanın alaka düzeyine eklemek istiyorum.

— JQuery'nin

1

Soru: Alt düğümü eklerken, ekli olayları kaybediyor muyuz?

— jimasun

1

Kendi sorumun cevabı evet, ekli olayları tutuyor.

— jimasun

95

Öğenizi divkoymak istediğiniz yerde içeriğe sahipse ve öğenin ana içerikten sonra gösterilmesini istiyorsanız :

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

Öğenizi divnereye koymak istediğiniz yerde içeriğe sahipse ve öğeyi ana içerikten önce göstermek istiyorsanız :

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

Öğenizi divkoymak istediğiniz yer boşsa veya öğeyi 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.

— sbaaaang
kaynak

Tüm kalın yazı tipini okumak biraz zor, ama bu en bilgilendirici cevap, bu yüzden benim oyumu alır.

— Michael Scheper

32

Kullanabilirsiniz:

Sonra Eklemek için,

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

Başka bir öğenin içine eklemek için,

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

— Subrahmanyam
kaynak

20

Hızlı bir demo ve öğeleri nasıl taşıdığınız hakkında daha fazla ayrıntı istiyorsanız, bu bağlantıyı deneyin:

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

Kısa bir örnek:

Bir öğeyi YUKARIDA taşımak için:

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

Bir öğeden SONRA taşımak için:

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

Bir öğenin içinde hareket etmek için, o kabın içindeki TÜM öğeleri YUKARIDIR:

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

Bir öğenin içinde hareket etmek için, o kabın içindeki TÜM öğelerden SONRA:

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

— Dan
kaynak

19

Kaynağı hedefe taşımak için aşağıdaki kodu kullanabilirsiniz

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

çalışmayı deneyin codepen

Kod snippet'ini göster

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>

Snippet'i genişlet

— Subodh Ghulaxe
kaynak

11

Eski soru ama buraya geldim çünkü tüm olay dinleyicileri de dahil olmak üzere içeriği bir kaptan diğerine taşımam gerekiyor .

jQuery'nin bunu yapmanın bir yolu yoktur, ancak appendChild'in standart DOM işlevi vardır.

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

AppendChild kullanımı .source öğesini kaldırır ve olay dinleyicileri de dahil olmak üzere hedefe yerleştirir: https://developer.mozilla.org/en-US/docs/Web/API/Node.appendChild

— HMR
kaynak

6

Ayrıca deneyebilirsiniz:

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

Ancak bu, sahip olduğunuz her şeyin üzerine yazacaktır #destination.

— Tamas
kaynak

2

Ve taşınan öğedeki break olay dinleyicileri.

— Igor Pomaranskiy

4

insertAfter& afterVeya insertBefore& arasında büyük bellek sızıntısı ve performans farkı fark ettim. beforeTonlarca DOM öğeniz varsaafter() veya before()bir MouseMove olayı kullanmanız veya içinde kullanmanız gerekiyorsa , tarayıcı belleği muhtemelen artacaktır ve sonraki işlemler gerçekten yavaş çalışacaktır.

Az önce yaşadığım çözüm bunun yerine before()insertBefore ve insertAfter kullanmaktır after().

— spetsnaz
kaynak

Bu, JavaScript motoru uygulamasına bağlı bir sorun gibi görünüyor. Bunu hangi tarayıcı sürümü ve JS motoruyla görüyorsunuz?

— Mark Richman

1

Chrome 36.0.1985.125 sürümünde ve jQuery v1.11.1 kullanıyorum. Fareyle üzerine gelindiğinde öğeyi aşağı veya yukarı hareket ettiren basit bir DIV'yi hareket ettirme olayında bir işlev bağlarım. Bu nedenle, bu olay ve işlev imlecinizi sürüklerken çalışır. Bellek sızıntısı, imlecinizi 30 saniye + için hareket ettirirseniz after () ve before () öğelerinde oluşur ve bunun yerine insertAfter & insertBefore kullanırsam kaybolur.

— spetsnaz

1

Bu konuda Google'da bir hata açarım.

— Mark Richman

2

appendChild()Yöntemi kullanarak saf JavaScript kullanabilirsiniz ...

AppendChild () yöntemi, bir düğümün son alt öğesi olarak bir düğüm ekler.

İpucu: Metinle yeni bir paragraf oluşturmak istiyorsanız, metni paragrafa eklediğiniz bir Metin düğümü olarak oluşturmayı unutmayın, ardından paragrafı belgeye ekleyin.

Bu yöntemi, bir öğeyi bir öğeden diğerine taşımak için de kullanabilirsiniz.

İpucu: Belirtilen, var olan bir alt düğümden önce yeni bir alt düğüm eklemek için insertBefore () yöntemini kullanın.

Böylece bunu yapmak için bunu yapabilirsiniz, sizin için oluşturduğum, kullandığım appendChild(), çalıştığınız ve davanız için nasıl çalıştığını görün:

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>

Snippet'i genişlet

— Alireza
kaynak

0

Tamlık uğruna, bu makalede başka bir yaklaşım var wrap()ya da wrapAll()bahsedildi . Dolayısıyla OP'nin sorusu muhtemelen bununla çözülebilir (yani, henüz var olmadığı varsayılarak, aşağıdaki yaklaşım böyle bir sarıcı yaratacaktır - OP, sargının zaten var olup olmadığı konusunda net değildi):<div id="destination" />

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

Kulağa umut verici geliyor. Ancak, böyle $("[id^=row]").wrapAll("<fieldset></fieldset>")birden çok iç içe yapı üzerinde yapmaya çalışırken :

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

Bunları doğru bir şekilde sarar <div>...</div>ve <input>...</input>AMA BAZI BİR ŞEYDEN ÇIKARIR <label>...</label>. Bu yüzden açık $("row1").append("#a_predefined_fieldset")yerine kullanın. Yani, YMMV.

— RayLuo
kaynak