【jQuery】append()を使って要素の後ろに追加する!

要素の後ろに追加するにはjQueryのappend()を使用します。

jQueryのappend()とは各要素内の一番後ろに指定したHTMLや要素を挿入するメソッドであり、リストなどの複数に並べられている要素内の後ろに文字列や要素、jQueryオブジェクトを挿入することができます。

また、要素の後ろにHTMLや要素を挿入するメソッドとして、appendTo()メソッドもありますが、違いとしてはセレクタといパラメータが逆になるということです。

今回は、jQueryのappend()を使って要素の後ろに追加する方法を初心者でもわかりやすく以下の内容で解説していきます。

⚫︎ 要素の後ろに単数の要素を挿入する場合
⚫︎ 要素の後ろに複数の要素を挿入する場合
⚫︎ 条件などを指定して要素の後ろに要素を挿入する場合

⚫︎ append()で既にある要素を別の要素の後ろに挿入する方法

append()とは

append()とは、指定したコンテンツを指定した要素の後ろに挿入するメソッドになります。

下の例は追加ボタンを押したら『案件探す!』と文字が追加れる例です。append()メソッドを使用して追加してます。

append()の書き方

append()メソッドの構文は下記となります。

パラメータ

⚫︎ 追加したい要素:
指定したセレクタの後ろに追加したい要素を指定する
(文字列や要素、jQueryオブジェクトを指定する)
⚫︎ 関数:
指定したセレクタの後ろに挿入したい文字列や要素、jQueryオブジェクトを返す関数を指定する

append()のパラメータに追加したい要素を指定することで、追加した内容をセレクタ内の後ろに要素を挿入することができます。
また、パラメータに関数を指定することで、条件など何かしらの処理を行った後にセレクタ内の先頭に要素を挿入することができます。

要素の後ろに追加するサンプルコード

要素の後ろに追加するサンプルコードを紹介します。

要素の後ろに単数の要素を挿入する場合

要素の後ろに単数の新しい要素を挿入する場合は、append()のパラメータに追加する要素を指定します。

HTML

index.js

実行結果

append()のパラメータに追加したい要素を指定することで、要素の後ろに単数の新しい要素を挿入することができます。
その為、ボタンを押すと単数の要素が挿入されています。

要素の後ろに複数の要素を挿入する場合

要素の後ろに複数の要素を挿入する場合はappend()のパラメータに追加する要素を「,(カンマ)」で区切って指定します。

HTML

実行後のHTML

実行結果

append()のパラメータに追加したい要素をカンマで区切って指定することで、要素の後ろに複数の新しい要素を挿入することができます。
その為、ボタンを押すと複数の要素が要素が挿入されています。

条件などを指定して要素の後ろに要素を挿入する場合

条件などを指定して要素の後ろに要素を挿入する場合はappend()のパラメータに関数を指定します。

sample.html

index.js

実行結果

append()のパラメータに関数を指定することで、条件などを指定して要素の後ろに新しい要素を挿入することができます。
その為、btn1クラス、btn2クラス、btn3クラスのボタンの順に押さないと要素が挿入されないようになっています。

append()で既にある要素を別の要素の後ろに挿入する方法

append()メソッドは既にある要素を別の要素の後ろに挿入することもできます。

sample.html

index.js

実行結果

append()のパラメータに$(セレクタ)を指定するすることで、既にある要素を別の要素の後ろに挿入することができます。
その為、ボタンを押すとappendEleクラスの要素がolタグ要素の後ろに挿入されます。

今回のポイント

append()で要素の後ろに要素を挿入

⚫︎ 各要素の先頭に要素を挿入するにはjQueryのappend()メソッドを使用する

⚫︎ append()で要素の後ろに単数の新しい要素を挿入するにはパラメータに追加したい要素を指定する

⚫︎ append()で要素の後ろに複数の新しい要素を挿入するにはパラメータに追加したい要素をカンマで区切って指定する

⚫︎ 条件などを指定して要素の後ろに新しい要素を挿入する場合はappend()のパラメータに関数を指定する

⚫︎ append()で既にある要素を別の要素の後ろに持っていくことができる

関連記事

jQueryのafter()で要素の前に新しい要素を挿入する方法についてはこちらをご参考ください。

jQueryのprependTo()で各要素の先頭に追加する方法についてはこちらをご参考ください。

jQueryのprepend()で各要素の先頭に要素を挿入する方法についてはこちらをご参考ください。

Writer
Ryotin

Ryotin

現役フリーランスエンジニアです。使ってるエージェントはフライテック!得意言語はJava。月収は75万円。SESのフリーランスではこれ以上稼ぐのは厳しそう...とはいってもサラリーマンの時より倍の収入だから家族も喜んでるけどね!

最新の案件情報