> JavaScript/jQuery > HTML上の要素の位置を変更するjQuery
HTML上の要素の位置を変更するjQuery

HTML上の要素の位置を変更するjQuery

HTMLに設置しているdivなどの要素を、画面サイズなどに応じて別の位置に移動したい場合、jQueryでは4種の移動方法があります。

HTMLを移動させるjQuery関数

HTML要素の移動に利用できる関数は以下の通りです。

insertBefore() ()内で指定した要素の前に移動する $('移動する要素').insertBefore('挿入先');
insertAfter() ()内で指定した要素の後に移動する $('移動する要素').insertAfter('挿入先');
prependTo() ()内で指定した要素内部の先頭に移動する $('移動する要素').prependTo('挿入先');
appendTo() ()内で指定した要素内部の最後に移動する $('移動する要素').appendTo('挿入先');

たとえば、下記のようなHTMLがあるとします。

HTML例

<ul>
    <li id="target">これを移動します</li>
</ul>

<ul id="fruit">
    <li id="apple">リンゴ</li>
    <li id="orange">みかん</li>
    <li id="banana">バナナ</li>
</ul>

上のリストからli#targetを下のリストの色んな場所に移動してみます。

insertBefore():移動先の前に移動する

()内で指定した要素を移動先の前に移動します。

JS例

$(function() {
    $('li#target').insertBefore('li#orange');
});

このようにすると、

  • リンゴ
  • これを移動します
  • みかん
  • バナナ

のように表示されます。

insertAfter():移動先の後に移動する

()内で指定した要素を移動先の後に移動します。

JS例

$(function() {
    $('li#target').insertAfter('li#orange');
});

このようにすると、

  • リンゴ
  • みかん
  • これを移動します
  • バナナ

のように表示されます。

prependTo():移動先内部の先頭に移動

()内で指定した要素を移動先内部の先頭に移動します。

JS例

$(function() {
    $('li#target').prependTo('ul#fruit');
});

このようにすると、

  • これを移動します
  • リンゴ
  • みかん
  • バナナ

のように表示されます。

appendTo():移動先内部の末尾に移動

()内で指定した要素を移動先内部の末尾に移動します。

JS例

$(function() {
    $('li#target').appendTo('ul#fruit');
});

このようにすると、

  • リンゴ
  • みかん
  • バナナ
  • これを移動します

のように表示されます。

まとめ

html()で要素を書き換えたりappend()で要素を追加することはあっても、既存の要素の移動はあまりしたことがなかったので、やり方をまとめてみました。
使い所は様々あると思うので積極的に使っていきたいです。

この記事が気に入ったらシェアしてください

関連記事

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryでチェックボックスを操作する方法まとめ【2021年版】

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でYoutube動画をモーダルで表示してみる(レスポンシブ対応済)

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

jQueryプラグイン「Colorbox」でHTMLタグや外部HTMLファイルをモーダルで表示してみる

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

簡単にモーダルウィンドウを実装できるjQueryプラグイン「Colorbox」

SyntaxHighlighterでの表示を色々カスタマイズしてみる

SyntaxHighlighterでの表示を色々カスタマイズしてみる

クリックするとトリガーが×になるドロワーメニュー

クリックするとトリガーが×になるドロワーメニュー

2 Comments

yossy

最後の記述例「insertBefore」はappendToですよね
  • 2021/09/30 16:58:59

yuricolo

ご指摘ありがとうございます。
修正させていただきました。
  • 2021/10/01 10:25:06

Comment Form

コメント投稿はこちらをクリックしてください
  • コメントを入力してください。
登録フォーム
Name
Mailaddress
URL
Message
Postkey
(スパム対策に、投稿キー を半角で入力してください。)