こんにちは。デザイナーのSUZUKIです。
今回はjQueryを利用した要素を移動・追加する方法を紹介します。
PC・スマホ時でメニューやボタンなど要素の位置が異なる場合にとても便利です。
下記4種類のjQueryのメソッドを紹介するので、状況に合わせて使ってみてください。
- append / appendTo
- prepend / prependTo
- after / insertAfter
- before / insertBefore
早速それぞれのメソッドを紹介しますが、
jQuery本体ファイルが必要になるので、読み込みを忘れずに！
※バージョンは新しいのでも問題ありません。
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
append / appendTo
【append】
appendメソッドは移動・追加したい要素を指定した要素の末尾に移動・追加します。
HTMLの要素やオブジェクトも指定可能です。
また、カンマ区切りにすることで複数の要素も移動・追加できます。
$("移動先の要素").append("移動する要素")
複数の要素の場合
$("移動先の要素").append("移動する要素1","移動する要素2")
【appendTo】
appendToメソッドはappendメソッドと同じ機能ですが、
移動先の要素と移動する要素が反対に記述します。
また複数要素やテキストだけの追加に対応していないので、注意してください。
$("移動する要素").appendTo("移動先の要素")
prepend / prependTo
【prepend】
prependメソッドは移動・追加したい要素を指定した要素の先頭に移動・追加します。
HTMLの要素やオブジェクトも指定可能です。
また、カンマ区切りにすることで複数の要素も移動・追加できます。
$("移動先の要素").prepend("移動する要素")
複数の要素の場合
$("移動先の要素").prepend("移動する要素1","移動する要素2")
【prependTo】
prependToメソッドはprependメソッドと同じ機能ですが、
移動先の要素と移動する要素が反対に記述します。
また複数要素やテキストだけの追加に対応していないので、注意してください。
$("移動する要素").prependTo("移動先の要素")
after / insertAfter
【after】
afterメソッドは移動・追加したい要素を指定した要素の後に移動・追加します。
HTMLの要素やオブジェクトも指定可能です。
また、カンマ区切りにすることで複数の要素も移動・追加できます。
$("移動先の要素").after("移動する要素")
複数の要素の場合
$("移動先の要素").after("移動する要素1","移動する要素2")
【insertAfter】
insertAfterメソッドはafterメソッドと同じ機能ですが、
移動先の要素と移動する要素が反対に記述します。
また複数要素やテキストだけの追加に対応していないので、注意してください。
$("移動する要素").insertAfter("移動先の要素")
before / insertBefore
【before】
beforeメソッドは移動・追加したい要素を指定した要素の前に移動・追加します。
HTMLの要素やオブジェクトも指定可能です。
また、カンマ区切りにすることで複数の要素も移動・追加できます。
$("移動先の要素").before("移動する要素")
複数の要素の場合
$("移動先の要素").before("移動する要素1","移動する要素2")
【insertBefore】
insertBeforeメソッドはbeforeメソッドと同じ機能ですが、
移動先の要素と移動する要素が反対に記述します。
また複数要素やテキストだけの追加に対応していないので、注意してください。
$("移動する要素").insertBefore("移動先の要素")
まとめ
【appendTo、prependTo、insertAfter、insertBefore】は複数要素やテキストだけの移動・追加に対応していないので、【append、prepend、after、before】を使うことをお勧めします。
今回のメソッドで、PC・スマホ時など、デザインを状況によって変える場合、
2重にタグを記述する必要がなく、無駄のない記述が可能です。
ただ要素をHTMLに直接移動・追加するので、処理が重くなる場合があります。
複数の箇所で使う場合は、なるべく負荷がかからないように処理をまとめるようにしましょう。
使い方もとても簡単なので、ドンドン使ってみてください。
参考リンク
下記サイトは参考にしたサイトになります。
表示方法の別パターンの説明もあるので、詳しく知りたい方はどうぞ。
http://www.flatflag.nir87.com/append-1159
https://qiita.com/nekoneko-wanwan/items/227ccad5f8cc449e91e9
https://itsakura.com/jquery-idou
