【jQuery】appendTo()で要素を対象要素の末尾に追加する!

エンジニアに特化した転職エージェント!

・IT/Web系エンジニアの経験者の方
・どこの転職エージェントを利用しようか迷っている方

それなら、キッカケエージェントにご相談!

キッカケエージェントでは、少数精鋭のエージェントが、エンジニアの経験やスキル、志向性などをカウンセリングし、的確なアドバイスを提供します!

また、徹底した企業へのヒアリングにより、最適なマッチングを実現し、今では内定率が一般的なエージェントの2倍以上となっています!

転職エージェントに迷っている方、まずは無料でキャリア相談から!




(この記事は2023年10月08日に投稿されました。)

jQueryで対象要素の一番下に要素を追加する方法としてappendTo()があります。

appendTo()とは要素を対象要素の末尾に追加するメソッドになります。

そのため、指定した要素を対象要素の内の一番下に差し込むような形になります。

また、appendTo()はセレクタに既存の要素を指定することで、対象要素の末尾に移動することもできます。

そして、appendTo()とよく似たappend()というメソッドがありますが、使い方に違いがありますので注意して使用するようにしましょう。

今回はjQueryのappendTo()で要素を対象要素の末尾に追加する方法について紹介していきます。

この記事はこんな方におすすめ

要素を対象要素の一番下に追加したい場合

appendTo()とは

appendTo()とは要素を対象の要素内の末尾に追加するメソッドになります。

そのため、

appendTo()の書き方

appendTo()の書き方は下記のようになります。

セレクタの後ろにappendTo()と追記し、必須の引数を1つ指定して使用します。

appendTo()の引数

appendTo()の引数は下記のようになります。

  1. 対象要素:(必須)
    末尾に追加する対象要素のセレクタを指定する
    (テキストやオブジェクトでも可能)

appendTo()は必須な引数として「対象要素」を指定します。

appendTo()の返り値

appendTo()の返り値は追加した要素のjQueryオブジェクトとなります。

appendTo()で要素を対象要素の末尾に追加するサンプルコード

appendTo()で要素を対象要素の末尾に追加するサンプルコードをご紹介します。

ここでは下記の3パターンでappendTo()を使用します。

  1. 対象要素が存在する場合
  2. 対象要素が複数存在する場合
  3. 対象要素が存在しない場合

対象要素が存在する場合

対象要素が存在する場合にappendTo()を使用すると、対象要素の末尾に要素を追加します。

● index.html

● style.css

● main.js

実行結果

対象要素が存在する場合にappendTo()を使用した結果

appendTo()で要素を対象の要素内の末尾に追加しています。

そのため、「追加」ボタンをクリックすると「appTo」と書かれた要素が対象要素の上に表示されています。

また、ソースコードを見ると「obj-appto」クラス要素が「obj」クラス要素の末尾に追加されています。

対象要素が複数存在する場合

対象要素が複数存在する場合にappendTo()を使用すると、マッチした全ての対象要素の末尾に要素を挿入します。

● index.html

● style.css

● main.js

実行結果

対象要素が複数存在する場合にappendTo()を使用した結果

appendTo()で要素を対象要素の末尾に追加しています。

そのため、「追加」ボタンをクリックすると「appTo」と書かれた要素が対象要素たちの下に表示されています。

また、ソースコードを見ると「obj-appto」クラス要素が「obj」クラス要素たちの末尾に追加されています。

対象要素が存在しない場合

対象要素が存在しない場合にappendTo()を使用すると、要素の追加は行われません。

● index.html

● style.css

● main.js

実行結果

対象要素が存在しない場合にappendTo()を使用した結果

appendTo()で要素を対象要素の末尾に追加しています。

今回は「追加」ボタンをクリックしても何も起きません。

また、ソースコードを見ると何も変化が起きていません。

appendTo()で既存の要素を対象要素の末尾に追加する場合

appendTo()で既存の要素を対象要素の末尾に追加するには、セレクタに「既存要素」を指定します。

そのため、既存の要素が対象要素の末尾に移動するようになります。

● index.html

● style.css

● main.js

実行結果

appendTo()で既存の要素を対象要素の末尾に追加した結果

appendTo()で既存の要素を対象要素の末尾に追加しています。

そのため、「追加」ボタンをクリックすると「obj」と書かれた要素が対象要素たちの下に表示されています。

また、ソースコードを見ると「obj3」クラス要素が「obj」クラス要素たちの末尾に追加されています。

appendTo()で要素を特定の対象要素の末尾に追加する場合

appendTo()で要素を特定の対象要素の末尾に追加するには、eq()を使用します。

eq()とはマッチしたセレクタをインデックスで指定することができるメソッドになります。

そのため、マッチした対象要素にeq()を使用することで、特定の対象要素の末尾のみに追加することができます。

● index.html

● style.css

● main.js

実行結果

appendTo()で要素を特定の対象要素の末尾のみに追加し結果

appendTo()とeq()で要素を特定の対象要素の末尾に追加しています。

そのため、「追加」ボタンをクリックすると特定の「appTo」と書かれた要素が特定の対象要素の下に表示されています。

また、ソースコードを見ると「obj-appTo」クラス要素が2番目にマッチした「obj」クラス要素の末尾に追加されています。

もし、eq()について詳しく知りたい場合は下記の記事をご参照ください。

appendTo()を使用した実際のケース

appendTo()を使用した実際のケースをご紹介します。

例えば、appendTo()を使用してスクロール時に画像を表示するようなコードを作成します。

● index.html

● style.css

● main.js

実行結果

appendTo()でスクロール時に画像をスライドで表示した結果

appendTo()でスクロール時に画像をスライドして表示しています。

今回はスクロールしたタイミングで、appendTo()で画像要素をスライドアニメーションで追加するようにしています。

そのため、スクロールしたタイミングで画像が横からスライドして表示されています。

appendTo()とappend()の違い

jQueryでは対象要素の末尾にノードを挿入することができるappend()というappendTo()とよく似たメソッドがあります。

対象要素の末尾に追加することから同じメソッドのように思えますが、両メソッドには違いがあるため、使用する際には注意が必要です。

そのため、ここではappendTo()とappend()の違いについてご紹介します。

もし、append()について先に知りたい場合は下記の記事をご参照ください。

Sossy

appendTo()とappend()は類似したメソッドになりますが、使用する際に違いがあるので、
引数とセレクタの指定が逆であるという認識で使用しないようにしましょう。

引数が異なる

1つ目の違いは引数が異なるということです。

appendTo()は「対象の要素」が引数となりますが、append()は「挿入するノード」が引数となります。

● index.html

● style.css

● main.js

実行結果

appendTo()とappend()の違いの結果

appendTo()とappend()で要素を対象要素の末尾に追加しています。

そのため、「結果」ボタンをクリックすると「obj1」と書かれた要素には「appTo」と書かれた要素が、「obj2」と書かれた要素には「app」と書かれた要素が表示されています。

また、ソースコードを見ると「appTo」クラス要素が「obj1」クラス要素の末尾に追加され、「app」クラス要素が「obj2」クラス要素の末尾に追加されています。

Sossy

「BにAを追加する」というappendTo()のイメージに対して、appendTo()は「AにBを挿入する」というイメージになります。

テキストを追加できない

2つ目の違いはテキストを追加できないということです。

appendTo()は要素のみが追加可能ですが、append()の引数は要素だけでなく、テキストも追加することができます。

● index.html

● style.css

● main.js

実行結果

テキストを追加する場合のappendTo()とappend()の違いの結果

appendTo()とappend()でテキストを対象要素の末尾に追加しています。

そのため、「結果」ボタンをクリックすると「obj1」と書かれた要素には何も起こっていませんが、「obj2」と書かれた要素には「テキストを追加」と書かれたテキストが表示されています。

また、ソースコードを見ると「テキストを追加」というテキストが「obj1」クラス要素の末尾には追加されていませんが、「obj2」クラス要素の末尾には追加されています。

複数の要素を追加できない

3つ目の違いは複数の要素を追加できないということです。

appendTo()は追加する要素がセレクタとなるため、複数要素の指定ができません。

しかし、appendTo()は挿入する要素が引数となるため、カンマで区切ることで複数の要素を追加することができます。

● index.html

● style.css

● main.js

実行結果

要素を複数追加する場合のappendTo()とappend()の違いの結果

appendTo()とappend()で複数の要素を対象要素の末尾に追加しています。

そのため、「結果」ボタンをクリックすると「obj1」と書かれた要素には「appTo」と書かれた要素が1つ表示され、「obj2」と書かれた要素には「app」と書かれた要素が2つ表示されています。

また、ソースコードを見ると「appTo-1」クラス要素が「obj1」クラス要素の末尾に追加され、「appTo-1」と「appTo-2」クラス要素が「obj2」クラス要素の末尾に追加されています。

Sossy

append()は引数をカンマで区切ることで複数の要素を追加することができますが、
appendTo()の場合はセレクタをカンマで区切ることができないため、複数の要素を追加することができません。

JavaScriptで対象要素の末尾に要素を追加する場合

JavaScriptで要素を対象要素の末尾に追加するには、appendChild()を使用します。

appendChild()とは指定したセレクタの子ノードを操作するプロパティになります。

そのためappendChild()を使用することで、対象要素の末尾に要素を挿入することができます。

● index.html

● style.css

● main.js

実行結果

appendChild()要素を対象要素の末尾に追加した結果

appendChild()で要素を対象要素の末尾に追加しています。

そのため、「追加」ボタンをクリックすると「app」と書かれた要素が「obj」と書かれた要素に表示されています。

また、ソースコードを見ると「app」クラス要素が「obj」クラス要素の末尾に追加されています。

もし、appendChild()について詳しく知りたい場合は下記の記事をご参考下さい。

要素を対象要素の先頭に追加する場合

要素を対象要素の先頭に追加するにはprependTo()を使用します。

prependTo()は、要素を対象要素の先頭に追加するメソッドになります。

そのため、今回のappendTo()とは、対になるメソッドになります。

● index.html

● style.css

● main.js

実行結果

prependTo()で要素を対象要素の先頭に追加した結果

prependTo()で要素を対象要素の先頭に追加しています。

そのため、「追加」ボタンをクリックすると「preTo」と書かれた要素が「obj」と書かれた要素に表示されています。

また、ソースコードを見ると「obj-preto」クラス要素が「obj」クラス要素の中の一番下に追加されています。

もし、prependTo()について詳しく知りたい場合は下記の記事をご参考下さい。

まとめ

⚫︎ appendTo()とは要素を対象要素の末尾に追加するメソッドである。

⚫︎ appendTo()は下記の引数を指定して使用する
・対象の要素(必須)

⚫︎ 対象要素が存在する場合にappendTo()を使用すると、指定した要素を対象要素の末尾に追加する。

⚫︎ 対象要素が複数存在する場合にappendTo()を使用すると、指定した要素を対象要素全ての末尾に追加する。

⚫︎ 対象要素が存在しない場合にappendTo()を使用すると、要素の追加は行われない。

⚫︎ セレクタに既存の要素を指定してappendTo()を使用すると、既存要素を対象要素の末尾に移動することができる。

⚫︎ appendTo()で要素を特定した対象要素の末尾に追加するにはeq()を組み合わせて使用する。

⚫︎ appendTo()とappend()には下記のような違いがある
・引数が異なる。
・テキストを追加することができない。
・複数の要素を追加することができない。

⚫︎ Javascriptで要素を対象要素の末尾に追加するにはappendchild()を使用する。

⚫︎ 要素を対象要素の末尾に追加するにはprependTo()を使用する。

コメントを残す

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

CAPTCHA