JavaScriptとjQueryでDOMを操作して既存のHTML要素を移動する方法を解説します。
jQueryを使用する場合は、jQueryの導入が必要です。
【JavaScrit】要素を移動する方法
【JavaScrit】移動させたい要素を指定した要素内の先頭に挿入する方法
以下は、#move_element
を#insert_destination
内の先頭に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の取得
const elementToMove = document.getElementById('move_element');
// 移動先の親要素を取得
const destination = document.getElementById('insert_destination');
// 先頭に要素を追加
destination.insertBefore(elementToMove, destination.firstChild);
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<div id="move_element">移動用コンテンツ</div>
<p>移動先</p>
</div>
</div>
【JavaScrit】移動させたい要素を指定した要素内の末尾に挿入する方法
以下は、#move_element
を#insert_destination
内の末尾に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の取得
const elementToMove = document.getElementById('move_element');
// 移動先の親要素を取得
const destination = document.getElementById('insert_destination');
// 末尾に要素を追加
destination.appendChild(elementToMove);
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
<div id="move_element">移動用コンテンツ</div>
</div>
</div>
【JavaScrit】移動させたい要素を指定した要素の前に挿入する方法
以下は、#move_element
を#insert_destination
の前に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の取得
const elementToMove = document.getElementById('move_element');
// 移動先の兄弟要素を取得
const destination = document.getElementById('insert_destination');
// 要素を兄弟要素の前に追加
destination.before(elementToMove);
実行後のHTML
<div class="content_box">
<div id="move_element">移動用コンテンツ</div>
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
【JavaScrit】移動させたい要素を指定した要素の後に挿入する方法
以下は、#move_element
を#insert_destination
の後に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の取得
const elementToMove = document.getElementById('move_element');
// 移動先の兄弟要素を取得
const destination = document.getElementById('insert_destination');
// 要素を兄弟要素の後に追加
destination.after(elementToMove);
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
<div id="move_element">移動用コンテンツ</div>
</div>
【jQuery】要素を移動する方法
【jQuery】移動させたい要素を指定した要素内の先頭に挿入する方法
以下は、#move_element
を#insert_destination
内の先頭に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の先頭に追加
$('#move_element').prependTo('#insert_destination');
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<div id="move_element">移動用コンテンツ</div>
<p>移動先</p>
</div>
</div>
【jQuery】移動させたい要素を指定した要素内の末尾に挿入する方法
以下は、#move_element
を#insert_destination
内の末尾に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の末尾に追加
$('#move_element').appendTo('#insert_destination');
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
<div id="move_element">移動用コンテンツ</div>
</div>
</div>
【jQuery】移動させたい要素を指定した要素の前に挿入する方法
以下は、#move_element
を#insert_destination
の前に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の前に追加
$('#move_element').insertBefore('#insert_destination');
実行後のHTML
<div class="content_box">
<div id="move_element">移動用コンテンツ</div>
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
【jQuery】移動させたい要素を指定した要素の後に挿入する方法
以下は、#move_element
を#insert_destination
の後に挿入するコードです。
<div id="move_element">移動用コンテンツ</div>
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
</div>
// 要素の後に追加
$('#move_element').insertAfter('#insert_destination');
実行後のHTML
<div class="content_box">
<div id="insert_destination">
<p>移動先</p>
</div>
<div id="move_element">移動用コンテンツ</div>
</div>
HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊
JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊
![アイコン画像](https://webdesign-programming.com/img/icon_momiji.jpeg)
もみじ
この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。
非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。
もみじ
HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。
実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。