WEB業界で働く人や興味がある人に役立つ情報サイト“qam（カム）”

投稿者： JQ
カテゴリー： プログラム >JavaScript

通常WebページにはHTMLでコーディングされた要素しか表示されませんが、ユーザーの行動によって内容が変化するインタラクティブなコンテンツを作成する場合は、ページを表示した後も内容を変更したい場合があります。

今回はサンプルとして、ユーザーがボタンを押すたびに要素が増えていくコンテンツを作成してみたいと思います。

基本的な要素の増やし方

See the Pen sample201805 by TAKASHI (@takashi1107) on CodePen.

jQueryで要素を追加する方法はとても簡単です。

$('要素を追加したい親要素').append('子として追加したい内容');

「要素をどこに追加したいのか」「追加したい内容（HTMLコード）は何なのか」が決まれば上記のコードを書くだけで実現できます。
上記のサンプルでは、追加するきっかけとしてボタンをクリックしたときという指定をしています。もちろん、ページをスクロールしたときや、リンクをクリックしたときなど、タイミングは自由に決められます。

応用編1「変数を混ぜる」

appendで追加する要素の中には、Javascriptの変数を混ぜることもできます。

See the Pen sample201805_2 by TAKASHI (@takashi1107) on CodePen.

Javascriptでは、文字列を「+」でつなぐことができますので、上記のようにボタンを押すたびに、変数の部分が1ずつ大きくなっていく要素を追加することも可能です。

応用編2「前に追加する」

appendは、今ある要素の後ろに追加する命令でしたが、逆に前に追加する場合はprependという命令を使用します。

See the Pen sample201805_3 by TAKASHI (@takashi1107) on CodePen.

数字を1ずつ減らしながら、今ある要素の前に追加するように作成してみました。
これで、要素を前にも後ろにも追加することが出来るようになりました。

応用編3「要素を削除する」

要素は追加したいときもあれば、削除したいときもあると思います。そんなときはremoveという命令を使います。

See the Pen sample201805_4 by TAKASHI (@takashi1107) on CodePen.

今ある要素の最後尾の要素を削除する命令を書いてみました。:last-childとしているので最後尾の要素が削除されましたが、:nth-child(n)などと組み合わせると、任意の要素を削除することができます。

まとめ

今回はjQueryを使って、もともとHTMLには書かれていない要素を追加したり、削除したりする方法を紹介してきました。
要素を動的に操作できると、同じページでも訪れるたびに異なる体験をユーザーに与えることができるので、とても重宝します。

ぜひ、今回の方法を使って、インタラクティブなコンテンツを作ってみてください。

次回は「コードが長くなってしまうのをなんとかしたい！」という内容でお送りする予定です。

本シリーズ、これまでの記事はこちら

jQueryでの「困った」を解決！（1）クリックしたのに動かない？
jQueryでの「困った」を解決！（2）時間差でclassを付け外ししたい！
jQueryでの「困った」を解決！（3）CSSをまとめて設定したい！