I'll be NET 】創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)

トップページ > 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').insertBefore('ul#fruit');
});

このようにすると、

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

のように表示されます。

まとめ

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

記事移動

関連記事

JavaScriptで現在のURLを取得する方法

ロード時やスクロール時にふわっと表示させるjQuery

ロード時やスクロール時にふわっと表示させるjQuery

pixiv小説のように縦書き表示する方法-2019版

pixiv小説のように縦書き表示する方法-2019版

facebookページの投稿一覧をGraphAPIとjQuery(json)で表示してみる

jQueryで特定のパラメータの値を取得する関数

jQueryで特定のパラメータの値を取得する関数

jQueryでページ内リンクをスムーススクロールさせる方法

jQueryでページ内リンクをスムーススクロールさせる方法

Comment Form

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

ユーティリティ

創作サイトから中小企業まで東京都三鷹市で低価格高品質なホームページ制作(SOHO)【I'll be NET】

プロフィール

author:I'll be NET

since:2014.01.01

東京都を拠点としたSOHO(フリーランス)による創作サイト向けWEB制作サービスを行っています。 お仕事とか創作活動とかでメモっておきたいこととかを掲載しています。

more

Feed