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

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

既にある要素を移動する方法（jQuery）

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

<div class="div1">
  ここから移動
  <span class="subject">移動対象</span>
</div>

<div class="div2">
  ここに移動
</div>

<script>
jQuery(function($){
  // ↓　要素の最後に移動
  $('.subject').appendTo('.div2');

  // ↓　要素の先頭に移動
  // $('.subject').prependTo('.div2');
});
</script>

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

「要素の隣」に移動させるときはinsertBefore()insertAfter()を使う

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

既にある要素を移動する方法（javascript）

javascriptだとちょっと面倒くさくなってappendChild()とinsertBefore()を使う

insertBefore()は引数を二つ指定しないと動かない

parentElement.insertBefore(newElement, referenceElement);

parentElement…移動先要素
newElement…移動対象要素
referenceElement…この要素の前に追加される（nullを指定するとparentElementの末尾に追加できる）

<div class="div1">
  ここから移動
  <span class="subject">移動対象</span>
</div>
<div class="div2">
  ここに移動
</div>

<script src="./jquery.js"></script>

<script>
var subject = document.querySelector(".subject");
var div2 = document.querySelector(".div2");
// ↓　div2の最後に移動
div2.appendChild(subject);
// ↓　div2の先頭に移動
// div2.insertBefore(subject,div2.firstChild);
</script>

div2.firstChildでここに移動というテキストを取得して、insertBefore()で対象要素を.div2の先頭に追加している

要素の隣追加しようと思うと結構面倒くさくなる↓

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

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