【js】既にある要素を移動させる方法

既存の要素を別のところに移動させたかったときの備忘録
jQueryとjavascriptの2パターン紹介

【jQuery】既にある要素を移動する方法

jQueryで移動させたい要素を「要素の中」と「要素の隣（同階層）」に移動させる方法。

要素の中に移動する方法

「要素の中」に移動させる時はappendTo()又はprependTo()で移動ができる。

<div class="div1">
  <!-- ここから移動 -->
  <span class="subject">移動対象の要素</span>
</div>
<div class="div2">
  <!-- ここに移動 -->
</div>
<script>
jQuery(function($){
  // div2の最後に移動
  $('.subject').appendTo('.div2');
  // div2の先頭に移動
  $('.subject').prependTo('.div2');
});
</script>

これでdiv1からdiv2の要素の中に移動ができる。

要素の隣に移動する方法

「要素の隣（同じ階層）」に移動させるときはinsertBefore()insertAfter()を使う。

// div2の隣（前）に移動
$('.subject').insertBefore('.div2');
// div2の隣（後）に移動
$('.subject').insertAfter('.div2');

【javascript】既にある要素を移動する方法

javascriptで移動させたい要素を「要素の中」と「要素の隣（同階層）」に移動させる方法。

要素の中に移動する方法

javascriptの場合はappendChild()とinsertBefore()を使う。
※insertBefore()は引数を二つ指定しないと動かない。

parentElement.insertBefore(newElement, referenceElement);

• parentElement…移動先要素
• newElement…移動対象要素
• referenceElement…省略不可、.firstChildやnullなどを明示する必要あり（詳しくはこちら）

<div class="div1">
  <!-- ここから移動 -->
  <span class="subject">移動対象</span>
</div>
<div class="div2">
  <!-- ここに移動 -->
</div>
<script>
var subject = document.querySelector(".subject");
var div2 = document.querySelector(".div2");
// div2の最後に移動
div2.appendChild(subject);
// div2の先頭に移動
div2.insertBefore(subject,div2.firstChild);
</script>

div2.firstChildは.div2内の先頭に追加を明示している。（nullにすると.div2内の末尾に追加される）

要素の隣に移動する方法

javascriptで「要素の隣」追加する場合は以下のように書く。

// div2の隣（前）に移動
div2.parentNode.insertBefore(subject,div2);
// div2の隣（後ろ）に移動
div2.parentNode.insertBefore(subject,div2.nextElementSibling);

parentNodeで親に移動してinsertBefore()で移動させる必要があり。