ある要素を別の要素に移動させるには？

あるDIV要素を別のDIV要素の中に移動させたいと思います。例えば、これ（全ての子要素を含む）を移動させたいとします。

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

をこの中に移動させたいのです。

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

とすると、次のようになります。

<div id="destination">
  <div id="source">
    ...
  </div>
</div>
BoltClock
編集された質問 17日 9月 2014 в 3:45
プログラミング
javascript html jquery
14日 8月 2009 в 8:14
102 ビュー
ソリューション

また、[appendTo][1]関数（要素の末尾に追加する関数）を使用することもできます。

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

また、prependTo関数（要素の先頭に追加する）を使用することもできます。

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

例

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

[1]： http://api.jquery.com/appendTo/

Clonkex
編集した答え 26日 2月 2018 в 12:32
解説 (15)

使ったばかりです。

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

これはここから取ってきたものです。

Cᴏʀʏ
編集した答え 24日 7月 2015 в 2:55
解説 (4)

要素を置くdivの中にコンテンツが入っていて、その要素をメインコンテンツの*後に表示させたい場合。

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

要素を配置する div の中にコンテンツがあり、メインコンテンツの 前 に要素を表示したい場合。

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

要素を配置する div が空であるか、完全に 置換 したい場合。

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

上記のいずれかの前に要素を複製したい場合。

$("#destination").append($("#source").clone());
// etc.
Stop Harming Monica
編集した答え 22日 6月 2016 в 11:05
解説 (1)