jQueryのappendで複数要素を追加する方法を紹介！
jQueryのappendで複数要素を追加する方法は2パターンあります。それは appendの引数を複数にするか、そのまままとめて記述するかです。ここではそれぞれサンプルコードを用いてjQueryのappendで複数要素を追加する方法を紹介します。
jQueryのappendで複数要素を追加したい
jQueryのappendでは要素を追加することが出来ますが、一気に複数要素を追加したいということがあります。
appendを1つ1つ複数回記述して1つずつ要素を追加することもできるのですが、それだとコードが複数行になり見にくくなります。
ここでは1行でまとめてjQueryのappendで複数要素を追加する方法を紹介します。
jQueryのappendで複数要素を追加する方法
要素1つに対してappendを1つ記述し複数行に渡り記述するのではなく、jQueryのappendで複数要素を追加する方法として、appendの引数を複数にするか、そのまままとめて記述し1行で追加する2パターンあります。
それぞれ項目を分けて解説します。
appendの引数を複数にする
appendの引数を複数とったら順番に後ろに追加されていきます。
この性質を利用してappendで複数要素を追加します。
このようにappendの引数を複数とることで、「追加」ボタンを押したときに複数要素を追加することができます。
まとめて記述する方法
こちらではappendに複数の引数をとるのではなく、1つ目のサンプルコードを例にとると
append
append('<li>リスト1</li><li>リスト2</li><li>リスト3</li>')のようにまとめて記述することで、複数要素を追加することができます。
実際にサンプルコードを用意したので確認してみましょう。
「追加」ボタンを押すと、appendで複数要素を追加できていることが分かります。
まとめ
いかがでしたでしょうか？
jQueryのappendで複数要素を追加する方法としては主にここで紹介した2パターンになります。
ぜひここで紹介した方法を用いて、jQueryのappendで複数要素を追加してみてください。
