JavaScriptでHTML要素（DOM）を動的に移動する方法

静的にＨTML要素を移動したいが出来ない環境にある

JavaScriptを使って動的にHTML要素（DOM）を移動したい。

本記事ではこのような悩みを解決。

実装例を元に解説します。

insertBeforeメソッドを使って要素を移動

<div class="parent01">
  <p class="child01"></p>
</div>
<div class="parent02">
  <!-- child01をここに移動したい -->
  <p class="child02"></p>
</div>
<script>
  var parent02 = document.querySelector('.parent02');
  var child01 = document.querySelector('.child01');
  var child02 = document.querySelector('.child02');
　//要素を移動
  parent02.insertBefore(child01, child02);
</script>

insertBeforeメソッドを使って、要素を移動するコード例です。

insertBeforeメソッドを使うと、指定した要素の前に移動できます。

insertBeforeメソッドの使い方は以下の通りです。

移動先親要素.insertBefore(指定要素, 移動する要素);

実装例だとchild01要素をparent02親要素内にあるchild02要素の前に移動します。

appendChildメソッドを使って要素を移動

<div class="parent01">
  <p class="child01"></p>
</div>
<div class="parent02">
  <p class="child02"></p>
    <!-- child01をここに移動したい -->
</div>
<script>
  var parent02 = document.querySelector('.parent02');
  var child01 = document.querySelector('.child01');
  // 要素を移動
  parent02.appendChild(child01);
</script>

appendChildメソッドを使って、要素を移動するコード例です。

appendChildメソッドを使うと、指定した要素内の最後に移動できます。

appendChildメソッドの使い方は以下の通りです。

移動先親要素.appendChild(移動する要素);

実装例だとchild01要素をparent02親要素内の最後に移動します。

まとめ

JavaScriptでHTML要素（DOM）を動的に移動する方法について紹介しました。

以上で解説を終わります。

JavaScriptでHTML要素（DOM）を動的に移動する方法

insertBeforeメソッドを使って要素を移動

appendChildメソッドを使って要素を移動

まとめ

関連記事