☰

要素を別の要素に移動する方法 質問する

tag-icon • tag-icon javascript jquery html
要素を別の要素に移動する方法 質問する

ある DIV 要素を別の DIV 要素内へ移動したいと思います。たとえば、これを (すべての子要素を含めて) 移動します。

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

次のようにします:

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

つまり、次のようになります。

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

ベストアンサー1

使用したい場合がありますappendTo関数（要素の末尾に追加します）：

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

おすすめ記事