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