Written by Kasumi

JavaScriptでHTML要素(DOM)を動的に移動する方法

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

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

JavaScriptで親・兄弟のID・クラス・要素名を取得する方法

2023.01.21
3555
JavaScript

【JavaScript】任意のイベントで子要素を全て削除する方法

2023.01.10
6278
JavaScript

JavaScriptで連想配列をループで取り出す方法

2022.11.21
10815
JavaScript

【JavaScript】同じ文字列を指定した回数繰り返して表示する方法

2023.01.24
1124