jQuery

【jQuery】要素の追加・配置を入れ替えるシンプルなコード

jquery-order-change-appendto-prependto

コードの書き方が分からず、検索してやりたいことができそうなサイトを見つけたものの、コードが複雑で結局諦めてしまう、または理解するのにとても時間がかかってしまうことがあると思います。(私はよくあります。)
本シリーズでは、理解しやすいよう、出来るだけシンプルなコードを記載しています。
また、参考サイトとして、私がいくつかのサイトを検索した結果、わかりやすいサイトを選んで紹介させてもらっています。

今回は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等からご連絡いただけると幸いです。
また、本記事に無い疑問などもお待ちしています。

ABOUT ME
zaisube
自動車部品メーカーで設計業務をしています。 この100年に一度と言われる大変革期を機に、会社にぶら下がっているだけではダメだと、スキルを付けるべくプログラミング、ブログを始めました。

COMMENT

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です