HTMLに設置しているdivなどの要素を、画面サイズなどに応じて別の位置に移動したい場合、jQueryでは４種の移動方法があります。
もくじ
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()で要素を追加することはあっても、既存の要素の移動はあまりしたことがなかったので、やり方をまとめてみました。
使い所は様々あると思うので積極的に使っていきたいです。
