知っておくと便利なjQueryテクニック！子要素を別の親要素に移動する方法3選

2024-06-26

ここでは、jQueryを使って子要素を別の親要素に移動する方法を、2つの代表的な方法と、それぞれの応用例を交えて詳しく解説します。

方法1：appendTo()メソッドを使う

appendTo()メソッドは、選択された要素を別の要素の子要素として末尾に追加します。この方法は、子要素を新しい親要素の一番下に移動したい場合に適しています。

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent1"の要素の子要素を、idが"parent2"の要素の子要素として末尾に追加
    $("#parent1 p").appendTo("#parent2");
  });
</script>

上記のコードを実行すると、以下のようになります。

<div id="parent1">
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
  <p>子要素1</p>
  <p>子要素2</p>
</div>

方法2：insertBefore()メソッドを使う

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>子要素3</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent1"の要素の子要素のうち、2番目の要素を、idが"parent2"の要素の1番目の要素の前に挿入
    $("#parent1 p:eq(1)").insertBefore("#parent2 p");
  });
</script>

<div id="parent1">
  <p>子要素1</p>
  <p>子要素3</p>
</div>

<div id="parent2">
  <p>子要素2</p>
  <p>親要素2の子要素</p>
</div>

応用例

ドラッグ＆ドロップによる要素の並び替え
アコーディオンメニューの作成
タブメニューの作成
動的なコンテンツの読み込み

その他の注意事項

移動する子要素がすでに別の親要素に属している場合は、元の親要素から切り離されます。
移動する子要素のIDやクラス名を使用する場合は、重複に注意する必要があります。
jQueryのバージョンによっては、メソッド名が変更されている場合があります。最新バージョンのドキュメントを参照してください。

上記以外にも、jQueryには様々な要素操作メソッドが用意されています。これらのメソッドを組み合わせることで、より複雑な操作も可能になります。詳しくは、jQueryの公式ドキュメントを参照してください。

サンプルコード：jQueryで子要素を別の親要素に移動

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで子要素を移動</title>
  <script src="https://jquery.com/"></script>
</head>
<body>
  <div id="parent1">
    <p>子要素1</p>
    <p>子要素2</p>
  </div>

  <div id="parent2">
    <p>親要素2の子要素</p>
  </div>

  <script>
    $(document).ready(function() {
      // idが"parent1"の要素の子要素を、idが"parent2"の要素の子要素として末尾に追加
      $("#parent1 p").appendTo("#parent2");

      // 移動後の要素を確認
      console.log($("#parent2 p"));
    });
  </script>
</body>
</html>

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <title>jQueryで子要素を移動</title>
  <script src="https://jquery.com/"></script>
</head>
<body>
  <div id="parent1">
    <p>子要素1</p>
    <p>子要素2</p>
    <p>子要素3</p>
  </div>

  <div id="parent2">
    <p>親要素2の子要素</p>
  </div>

  <script>
    $(document).ready(function() {
      // idが"parent1"の要素の子要素のうち、2番目の要素を、idが"parent2"の要素の1番目の要素の前に挿入
      $("#parent1 p:eq(1)").insertBefore("#parent2 p");

      // 移動後の要素を確認
      console.log($("#parent2 p"));
    });
  </script>
</body>
</html>

実行結果

<div id="parent1">
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
  <p>子要素1</p>
  <p>子要素2</p>
</div>

<div id="parent1">
  <p>子要素1</p>
  <p>子要素3</p>
</div>

<div id="parent2">
  <p>子要素2</p>
  <p>親要素2の子要素</p>
</div>

説明

上記のコードは、HTML5とjQuery 1.12.4を前提としています。
コード内のコメントは、各部分の処理内容を説明しています。
コードを実行するには、ブラウザにファイルを保存して開くか、Webサーバーにアップロードして実行する必要があります。
コンソールログを確認するには、ブラウザの開発者ツールのコンソール機能を使用します。

補足

上記のサンプルコードは、基本的な操作のみを示しています。実際の使用場面に合わせて、必要に応じてコードを修正してください。
jQueryには、他にも様々な要素操作メソッドが用意されています。詳しくは、jQueryの公式ドキュメントを参照してください。

jQueryで子要素を別の親要素に移動するその他の方法

detach()メソッドとappend()メソッドを組み合わせる

この方法は、まず移動する子要素を元の親要素から切り離し、その後新しい親要素に追加します。

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent1"の要素の子要素を切り離す
    var $childElements = $("#parent1 p").detach();

    // 切り離した子要素を、idが"parent2"の要素の子要素として追加
    $childElements.appendTo("#parent2");
  });
</script>

after()メソッドを使う

この方法は、移動する子要素を参照要素の直後に挿入します。

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
  <p>参照要素</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent1"の要素の子要素のうち、参照要素の直後に移動
    $("#parent1 p:eq(2)").after($("#parent1 p:eq(0)"));
  });
</script>

replaceWith()メソッドを使う

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent2"の要素の子要素を、idが"parent1"の要素の子要素で置き換える
    $("#parent2 p").replaceWith($("#parent1 p"));
  });
</script>

<div id="parent1">
  <p>子要素1</p>
  <p>子要素2</p>
</div>

<div id="parent2">
  <p>親要素2の子要素</p>
</div>

<script>
  $(document).ready(function() {
    // idが"parent1"の要素の子要素をラップ
    var $wrappedElements = $("#parent1 p").wrap("<div>");

    // ラップした要素を、idが"parent2"の要素の子要素として追加
    $wrappedElements.appendTo("#parent2");
  });
</script>