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で上下のスクロールを判定する方法

2022.10.15
184
JavaScript

【JavaScript】配列から最大値・最小値を求める方法

2022.06.08
310
JavaScript

Failed to execute ‘insertBefore’ on ‘Node’ The node before which the new node is to be inserted is not a child of this node.の原因・対処方法

2022.12.03
264
JavaScript

disabledを使って任意のinput要素を入力無効にする方法【条件判定で解除する】

更新日:2022.09.09
913