あるDIV要素を別のDIV要素の中に移動させたいと思います。例えば、これ(全ての子要素を含む)を移動させたいとします。
<div id="source">
...
</div>
をこの中に移動させたいのです。
<div id="destination">
...
</div>
とすると、次のようになります。
<div id="destination">
<div id="source">
...
</div>
</div>
また、[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>
<button id="appendTo">appendTo main</button>
<button id="prependTo">prependTo main</button>
要素を置くdiv
の中にコンテンツが入っていて、その要素をメインコンテンツの*後に表示させたい場合。
$("#destination").append($("#source"));
要素を配置する div
の中にコンテンツがあり、メインコンテンツの 前 に要素を表示したい場合。
$("#destination").prepend($("#source"));
要素を配置する div
が空であるか、完全に 置換 したい場合。
$("#element").html('<div id="source">...</div>');
上記のいずれかの前に要素を複製したい場合。
$("#destination").append($("#source").clone());
// etc.