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)を動的に移動する方法について紹介しました。
以上で解説を終わります。
目次