コードの書き方が分からず、検索してやりたいことができそうなサイトを見つけたものの、コードが複雑で結局諦めてしまう、または理解するのにとても時間がかかってしまうことがあると思います。(私はよくあります。)
本シリーズでは、理解しやすいよう、出来るだけシンプルなコードを記載しています。
また、参考サイトとして、私がいくつかのサイトを検索した結果、わかりやすいサイトを選んで紹介させてもらっています。
今回はHTML, CSSの構成要素に対し、要素の追加や配置を変更させるコードです。
目次
1.ベースコード
2.要素の最後に要素を追加するコード(append)
2-1.シンプルなコード
2-2.コードの説明
2-3.参考サイト
3.要素の最後に要素を追加するコード(appendTo)
3-1.シンプルなコード
3-2.コードの説明
3-3.参考サイト
4.要素の先頭に要素を追加するコード(prepend)
4-1.シンプルなコード
4-2.コードの説明
4-3.参考サイト
5.要素の先頭に要素を追加するコード(prependTo)
5-1.シンプルなコード
5-2.コードの説明
5-3.参考サイト
6.最後に
1.ベースコード
ulの中に[1]〜[4]までのli要素が入っています。
2〜5までのコードは、ベースコードにjQueryを追加した物です。
See the Pen
jquery-order-change-appendto-prependto_01 by zaisube (@zaisube)
on CodePen.
2.要素の最後に要素を追加するコード(append)
2-1.シンプルなコード
See the Pen
jquery-order-change-appendto-prependto_02 by zaisube (@zaisube)
on CodePen.
2-2.コードの説明
$(“ul”).append(“<li>[5]</li>”);
→「ul」の子要素の最後に「<li>[5]</li>」を追加しています。
2-3.参考サイト
append
http://semooh.jp/jquery/api/manipulation/append/content/
3.要素の最後に要素を追加するコード(appendTo)
3-1.シンプルなコード
See the Pen
jquery-order-change-appendto-prependto_03 by zaisube (@zaisube)
on CodePen.
3-2.コードの説明
$(“<li>[5]</li>”).appendTo(“ul”);
→「ul」の子要素の最後に「<li>[5]</li>」を追加しています。
2-1のコードとは追加される要素と、追加する要素が入れ替わっていることに注意です。
また、appendToは、
$(“li:first”).appendTo(“ul”);
等とすることで、「ul」要素内の順番を入れ替えることもできます。
(この場合、liの最初の要素([1])を「ul」の最後に移動しています。)
See the Pen
jquery-order-change-appendto-prependto_04 by zaisube (@zaisube)
on CodePen.
3-3.参考サイト
appendTo
http://semooh.jp/jquery/api/manipulation/appendTo/content/
4.要素の先頭に要素を追加するコード(prepend)
4-1.シンプルなコード
See the Pen
jquery-order-change-appendto-prependto_05 by zaisube (@zaisube)
on CodePen.
4-2.コードの説明
$(“ul”).prepend(“<li>[0]</li>”);
「ul」の子要素の最初に「<li>[0]</li>」を追加しています。
4-3.参考サイト
prepend
http://semooh.jp/jquery/api/manipulation/appendTo/content/
5.要素の先頭に要素を追加するコード(prependTo)
5-1.シンプルなコード
See the Pen
jquery-order-change-appendto-prependto_06 by zaisube (@zaisube)
on CodePen.
5-2.コードの説明
$(“<li>[0]</li>”).prependTo(“ul”);
→「ul」の子要素の最初に「<li>[0]</li>」を追加しています。
4-1のコードとは追加される要素と、追加する要素が入れ替わっていることに注意です。
また、prpendToは、
$(“li:last”).prependTo(“ul”);
等とすることで、「ul」要素内の順番を入れ替えることもできます。
(この場合、liの最後の要素([4])を「ul」の最初に移動しています。)
See the Pen
jquery-order-change-appendto-prependto_07 by zaisube (@zaisube)
on CodePen.
5-3.参考サイト
prependTo
http://semooh.jp/jquery/api/manipulation/prependTo/content/
6.最後に
今回のコードはカルーセル(スライドショー)の作成時などに使用することがあり、クリック時に要素を追加する機能なども作成できるため、使用する機会が多いと思いますので、ぜひ参考にしてみてください。
分かりにく記述や、誤り等あれば、お問合せフォームやTwitter等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。
