web関連

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

【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()で移動させる必要がある

Leave a Comment

入力エリアすべてが必須項目です。メールアドレスが公開されることはありません。

内容をご確認の上、送信してください。