プログラミング

【PR】を含みます。

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

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

JavaScriptとjQueryでDOMを操作して既存のHTML要素を移動する方法を解説します。

jQueryを使用する場合は、jQueryの導入が必要です。

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

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の取得
  2. const elementToMove = document.getElementById('move_element');
  4. // 移動先の親要素を取得
  5. const destination = document.getElementById('insert_destination');
  7. // 先頭に要素を追加
  8. destination.insertBefore(elementToMove, destination.firstChild);

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <div id="move_element">移動用コンテンツ</div>
  4.     <p>移動先</p>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の取得
  2. const elementToMove = document.getElementById('move_element');
  4. // 移動先の親要素を取得
  5. const destination = document.getElementById('insert_destination');
  7. // 末尾に要素を追加
  8. destination.appendChild(elementToMove);

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <p>移動先</p>
  4.     <div id="move_element">移動用コンテンツ</div>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の取得
  2. const elementToMove = document.getElementById('move_element');
  4. // 移動先の兄弟要素を取得
  5. const destination = document.getElementById('insert_destination');
  7. // 要素を兄弟要素の前に追加
  8. destination.before(elementToMove);

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="move_element">移動用コンテンツ</div>
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の取得
  2. const elementToMove = document.getElementById('move_element');
  4. // 移動先の兄弟要素を取得
  5. const destination = document.getElementById('insert_destination');
  7. // 要素を兄弟要素の後に追加
  8. destination.after(elementToMove);

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <p>移動先</p>
  4.   </div>
  5.   <div id="move_element">移動用コンテンツ</div>
  6. </div>

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

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の先頭に追加
  2. $('#move_element').prependTo('#insert_destination');

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <div id="move_element">移動用コンテンツ</div>
  4.     <p>移動先</p>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の末尾に追加
  2. $('#move_element').appendTo('#insert_destination');

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <p>移動先</p>
  4.     <div id="move_element">移動用コンテンツ</div>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の前に追加
  2. $('#move_element').insertBefore('#insert_destination');

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="move_element">移動用コンテンツ</div>
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>

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

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

HTML
Copy
  1. <div id="move_element">移動用コンテンツ</div>
  2. <div class="content_box">
  3.   <div id="insert_destination">
  4.     <p>移動先</p>
  5.   </div>
  6. </div>
JavaSctipt
Copy
  1. // 要素の後に追加
  2. $('#move_element').insertAfter('#insert_destination');

実行後のHTML

HTML
  1. <div class="content_box">
  2.   <div id="insert_destination">
  3.     <p>移動先</p>
  4.   </div>
  5.   <div id="move_element">移動用コンテンツ</div>
  6. </div>

HTMLとCSSの知識がありJavaScriptを学びたいという方におすすめの1冊

アイコン画像

もみじ

HTMLとCSSの知識がありJavaScriptを学びたいという方に入門書としておすすめの書籍です。

実務で役立つサンプルを手を動かしながら学ぶことができ、実践的なスキルを身に付けることができます。

JavaScriptのフロントエンドエンジニアを目指している方におすすめの1冊

アイコン画像

もみじ

この本はJavaScript初心者からフロントエンドエンジニアを目指す方にぴったりの1冊です。

非同期処理やAJAXなど、現代の開発で必要なスキルがわかりやすく解説されており、実務で役立つスキルを学ぶことができます。

-プログラミング
-,