【JavaScript・jQuery】DOMを操作して要素を移動する方法

【JavaScript】要素を移動する方法
【jQuery】要素を移動する方法
まとめ

HTMLやWebページのレイアウト調整をしていると、「この要素をあちらに移動したい」「順番を入れ替えたい」といった場面はよくあります。

本記事では、JavaScriptやjQueryを使って、既存のHTML要素を自由に移動・挿入する具体的な方法をサンプルコード付きでわかりやすく解説します。

DOM操作の仕組みを理解し、実際に動かしながら使いこなせるようになりましょう。

リンク

【JavaScript】要素を移動する方法

【JavaScript】移動させたい要素を指定した要素内の先頭に挿入する方法

以下は、#move_elementを#insert_destination内の先頭に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の取得

const elementToMove = document.getElementById('move_element');

// 移動先の親要素を取得

const destination = document.getElementById('insert_destination');

// 先頭に要素を追加

destination.insertBefore(elementToMove, destination.firstChild);

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<div id="move_element">移動用コンテンツ</div>

<p>移動先</p>

</div>

【JavaScript】移動させたい要素を指定した要素内の末尾に挿入する方法

以下は、#move_elementを#insert_destination内の末尾に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の取得

const elementToMove = document.getElementById('move_element');

// 移動先の親要素を取得

const destination = document.getElementById('insert_destination');

// 末尾に要素を追加

destination.appendChild(elementToMove);

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

<div id="move_element">移動用コンテンツ</div>

</div>

【JavaScript】移動させたい要素を指定した要素の前に挿入する方法

以下は、#move_elementを#insert_destinationの前に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の取得

const elementToMove = document.getElementById('move_element');

// 移動先の兄弟要素を取得

const destination = document.getElementById('insert_destination');

// 要素を兄弟要素の前に追加

destination.before(elementToMove);

実行後のHTML

HTML

<div class="content_box">

<div id="move_element">移動用コンテンツ</div>

<div id="insert_destination">

<p>移動先</p>

</div>

【JavaScript】移動させたい要素を指定した要素の後に挿入する方法

以下は、#move_elementを#insert_destinationの後に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の取得

const elementToMove = document.getElementById('move_element');

// 移動先の兄弟要素を取得

const destination = document.getElementById('insert_destination');

// 要素を兄弟要素の後に追加

destination.after(elementToMove);

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

<div id="move_element">移動用コンテンツ</div>

</div>

【jQuery】要素を移動する方法

【jQuery】移動させたい要素を指定した要素内の先頭に挿入する方法

以下は、#move_elementを#insert_destination内の先頭に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の先頭に追加

$('#move_element').prependTo('#insert_destination');

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<div id="move_element">移動用コンテンツ</div>

<p>移動先</p>

</div>

【jQuery】移動させたい要素を指定した要素内の末尾に挿入する方法

以下は、#move_elementを#insert_destination内の末尾に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の末尾に追加

$('#move_element').appendTo('#insert_destination');

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

<div id="move_element">移動用コンテンツ</div>

</div>

【jQuery】移動させたい要素を指定した要素の前に挿入する方法

以下は、#move_elementを#insert_destinationの前に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の前に追加

$('#move_element').insertBefore('#insert_destination');

実行後のHTML

HTML

<div class="content_box">

<div id="move_element">移動用コンテンツ</div>

<div id="insert_destination">

<p>移動先</p>

</div>

【jQuery】移動させたい要素を指定した要素の後に挿入する方法

以下は、#move_elementを#insert_destinationの後に挿入するコードです。

HTML

Copy

<div id="move_element">移動用コンテンツ</div>

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

JavaScript

Copy

// 要素の後に追加

$('#move_element').insertAfter('#insert_destination');

実行後のHTML

HTML

<div class="content_box">

<div id="insert_destination">

<p>移動先</p>

</div>

<div id="move_element">移動用コンテンツ</div>

</div>

まとめ

本記事では、JavaScriptやjQueryを使ってDOM要素を自在に移動・挿入する方法を解説しました。

目的の位置に要素を移動させることで、Webページのカスタマイズ性やメンテナンス性が向上します。

今回紹介したサンプルコードを活用すれば、場面に応じて柔軟に要素を操作できるはずです。

ぜひ実際の制作で試しながら、DOM操作の習得に役立ててください。

リンク