【jQuery】appendTo()で指定した要素の最後に追加する！

指定した要素の最後に要素を追加するにはjQueryのappendTo()メソッドを使用します。

jQueryのappendTo()とは指定した要素内の一番後ろに指定した要素を追加するメソッドであり、ある要素A内の最後に要素Bを追加することができます。

要素の最後に追加するメソッドは他にもappend()メソッドがありますが、指定するパラメータとセレクタが逆になり、様々なケースで異なる部分がありますので注意が必要です。

今回は、jQueryのappendTo()を使って要素の後に新しい要素を追加する方法について以下の内容で解説していきます。

⚫︎ 指定した単数の要素の最後に要素を追加する場合
⚫︎ 指定した複数の要素の最後に要素を追加する場合

⚫︎ appendTo()で既にある要素を指定した要素の最後に追加する方法

⚫︎ append()とappendTo()の違い

appendTo()とは
指定した要素の最後に要素を追加するサンプルコード
- 指定した単数の要素の最後に要素を追加する場合
- 指定した複数の要素の最後に要素を追加する場合
appendTo()で既にある要素を指定した要素の最後に追加する方法
append()とappendTo()の違い
今回のポイント
- appendTo()で指定した要素の最後に要素を追加

今回はjQueryのappendTo()で指定した要素の最後に要素を追加する方法について説明していきます。

お願いします！

appendTo()とは

appendTo()とは、HTMLの指定した要素の後ろにコンテンツを追加するメソッドとなります。
つまり、ある要素Aの後ろにある要素Bが追加されるようになります。

</p> </div> <p></body></html>“‘>

appendTo()の書き方

appendTo()の書き方は下記となります。

$("追加する内容").appendTo("セレクタ");

1	$("追加する内容").appendTo("セレクタ");

パラメータ

⚫︎ セレクタ:
追加されるセレクタを指定する

appendTo()のパラメータに追セレクタを指定することで、$()で指定した追加した内容をセレクタ内の最後に要素を追加することができます。

指定した要素の最後に要素を追加するサンプルコード

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

指定した単数の要素の最後に要素を追加する場合

指定した単数の要素の最後に要素を追加する場合は、appendTo()のパラメータにセレクタを指定します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <h2>指定した単数の要素の最後に要素を追加する</h2>
  <div class= "lists1">
    <li class= "listA">Azureの案件</li>
    <li class= "listB">GoogleCrowdの案件</li>
    <li class= "listC">AWSの案件</li>
  </div>
  <div class= "lists2">
    <li class= "listC">C言語の案件</li>
    <li class= "listD">C#の案件</li>
    <li class= "listC">C++の案件</li>
  </div>
  <div class= "lists3">
    <li class= "listE">kotlinの案件</li>
    <li class= "listF">dartの案件</li>
    <li class= "listG">goの案件</li>
  </div>
  <div>
    <input type= "button" class="btn1" value="要素を追加">
    <input type= "button" class="btn2" value="要素を追加">
  </div>
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>指定した単数の要素の最後に要素を追加する</h2>

<li class= "listA">Azureの案件</li>

<li class= "listB">GoogleCrowdの案件</li>

<li class= "listC">AWSの案件</li>

</div>

<li class= "listC">C言語の案件</li>

</div>

<li class= "listE">kotlinの案件</li>

<li class= "listF">dartの案件</li>

<li class= "listG">goの案件</li>

</div>

<div>

</div>

</body>

</html>

style.css

.colorChange_2h {
  color: red;
  font-size: 25px;
}
.colorChange_3h {
  color: red;
  font-size: 23px;
}
.colorChange_p {
  color: red;
  font-size: 20px;
}

.colorChange_2h {

color: red;

font-size: 25px;

}

.colorChange_3h {

color: red;

font-size: 23px;

}

.colorChange_p {

color: red;

font-size: 20px;

}

index.js

$(function(){
  $(".btn1").on("click", function(){
    //lists1クラスの後に追加
    $('<p class= "colorChange_p">フライテックの案件</p>').appendTo(".lists1");
  });
  $(".btn2").on("click",function(){
    //lists2クラスの後に追加
    $('<h2 class= "colorChange_2h">フライテックの案件</h2>').appendTo(".lists2");
  });
  $(".btn3").on("click",function(){
    //lists2クラスの後に追加
    $('<h3 class= "colorChange_3h">フライテックの案件</h3>').appendTo(".lists3");
  });
});

$(function(){

$(".btn1").on("click", function(){

//lists1クラスの後に追加

$('<p class= "colorChange_p">フライテックの案件</p>').appendTo(".lists1");

});

$(".btn2").on("click",function(){

//lists2クラスの後に追加

$('<h2 class= "colorChange_2h">フライテックの案件</h2>').appendTo(".lists2");

});

$(".btn3").on("click",function(){

//lists2クラスの後に追加

$('<h3 class= "colorChange_3h">フライテックの案件</h3>').appendTo(".lists3");

});

出力結果

appendTo()のパラメータにセレクタを指定することで、指定した要素の最後に要素を追加することができます。
その為、ボタンを押すとlists1クラスにp要素を、lists2クラスに2h要素を、lists3クラスの最後に3h要素が追加されています。

指定した複数の要素の最後に要素を追加する場合

指定した複数の要素の最後に要素を追加する場合は、appendTo()のパラメータにセレクタを「,(カンマ)」で区切って指定します。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <h2>指定した複数の要素の最後に要素を追加する</h2>
  <div class= "lists1">
    <li class= "listA">Azureの案件</li>
    <li class= "listB">GoogleCrowdの案件</li>
    <li class= "listC">AWSの案件</li>
  </div>
  <div class= "lists2">
    <li class= "listC">C言語の案件</li>
    <li class= "listD">C#の案件</li>
    <li class= "listC">C++の案件</li>
  </div>
  <div class= "lists3">
    <li class= "listE">kotlinの案件</li>
    <li class= "listF">dartの案件</li>
    <li class= "listG">goの案件</li>
  </div>
  <div>
    <input type= "button" class="btn1" value="要素を追加">
  </div>
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>指定した複数の要素の最後に要素を追加する</h2>

<li class= "listA">Azureの案件</li>

<li class= "listB">GoogleCrowdの案件</li>

<li class= "listC">AWSの案件</li>

</div>

<li class= "listC">C言語の案件</li>

</div>

<li class= "listE">kotlinの案件</li>

<li class= "listF">dartの案件</li>

<li class= "listG">goの案件</li>

</div>

<div>

</div>

</body>

</html>

style.css

.colorChange_p {
  color: red;
  font-size: 20px;
}

.colorChange_p {

color: red;

font-size: 20px;

}

index.js

$(function(){
  $(".btn1").on("click", function(){
    //lists1クラスの後に追加
    $('<p class= "colorChange_p">フライテックの案件</p>').appendTo(".lists1, .lists2, .lists3");
  });
});

$(function(){

$(".btn1").on("click", function(){

//lists1クラスの後に追加

$('<p class= "colorChange_p">フライテックの案件</p>').appendTo(".lists1, .lists2, .lists3");

});

出力結果

appendTo()のパラメータにセレクタを「,(カンマ)」で区切って指定することで、指定した複数の要素の最後に要素を追加することができます。
その為、ボタンを押すとlists1クラス、lists2クラス、lists3クラスの最後にp要素が追加されています。

appendTo()で既にある要素を指定した要素の最後に追加する方法

appendTo()で既にある要素を指定した要素の最後に追加することができます。

sample.html

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<body>
  <h2>指定した要素の最後に要素を追加する</h2>
  <div class= "lists1">
    <li class= "listA">Azureの案件</li>
    <li class= "listB">GoogleCrowdの案件</li>
    <li class= "listC">AWSの案件</li>
  </div>
  <div class= "lists2">
    <li class= "listC">C言語の案件</li>
    <li class= "listD">C#の案件</li>
    <li class= "listC">C++の案件</li>
  </div>
  <div class= "lists3">
    <li class= "listE">kotlinの案件</li>
    <li class= "listF">dartの案件</li>
    <li class= "listG">goの案件</li>
  </div>
  <p class= "colorChange">フライテックのフリーランス案件</p>
  <input type= "button" class="btn1" value="要素を追加">
  <script src="index.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<h2>指定した要素の最後に要素を追加する</h2>

<li class= "listA">Azureの案件</li>

<li class= "listB">GoogleCrowdの案件</li>

<li class= "listC">AWSの案件</li>

</div>

<li class= "listC">C言語の案件</li>

</div>

<li class= "listE">kotlinの案件</li>

<li class= "listF">dartの案件</li>

<li class= "listG">goの案件</li>

</div>

<p class= "colorChange">フライテックのフリーランス案件</p>

</body>

</html>

style.css

.colorChange {
  color: blue;
  width: 300px;
  font-size: 20px;
}

.colorChange {

color: blue;

width: 300px;

font-size: 20px;

}

index.js

$(function(){
  $(".btn1").on("click", function(){
    //divタグの後に追加
    $("p").appendTo("div");
  });
});

$(function(){

$(".btn1").on("click", function(){

//divタグの後に追加

$("p").appendTo("div");

});

出力結果

appendTo()のパラメータに$(セレクタ)を指定するすることで、既にある要素を指定した要素の後ろに追加することができます。
その為、ボタンを押すとdivタグの要素の最後にpタグの要素が追加されます。

appendTo()を使用して既にある要素が指定した要素の最後に追加されていますね！

そうですね。
appendTo()のパラメータに$(セレクタ)を指定することでを既にある要素を指定した要素の最後に追加することができます。
また、パラメータに$(セレクタ)はタグやクラス名、id名でも構いません。

append()とappendTo()の違い

append()とappendTo()の違いはパラメータ指定が反対であると言いましたが他にも下記のような違いがあります。

違い	append()	appendTo()
パラメータに関数を指定できるかどうか	指定できる	指定できない
複数の要素を最後に追加できるかどうか	追加できる	追加できない
文字列を指定できるかどうか	指定できる	指定できない

このようにappend()メソッドではできても、appendTo()メソッドではできないケースがありますので注意してください。

また、jQueryのappend()メソッドについて詳しく知りたい場合はこちらをご参考ください。

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

https://flytech.work/blog/8467

append()とappendTo()の違いってパラメータの指定が反対になっているだけじゃないんですね！

そうですね。
パラメータの指定が反対になっているのも違いの一つですが、上記の表のように様々な部分で違いがあります。

複数の要素を指定する場合は$()に「,(カンマ)」をつけて区切って指定することはできないんですか？

指定することはできますけど最初に指定した要素のみが追加の対象となります。
append()の場合はパラメータに追加する要素を指定していたので複数の要素の追加は可能ですが、appendTo()の場合は$()に追加する内容を指定するので複数の要素の追加はできません。

なるほどですね！
append()とappendTo()はパラメータの指定が逆だからと言う認識で使用しない方がいいですね！

今回のポイント

appendTo()で指定した要素の最後に要素を追加

⚫︎ 指定した要素の最後に要素を追加するにはjQueryのappendTo()を使用する

⚫︎ 指定した単数の要素の最後に要素を追加するにはappendTo()のパラメータにセレクタを指定する

⚫︎ 指定した複数の要素の最後に要素を追加するにはappendTo()のパラメータであるセレクタを「,(カンマ)」で区切って指定する

⚫︎ appendTo()で既にある要素を指定した要素の最後に追加することができる

⚫︎ append()とappendTo()はパラメータが逆だけで同じメソッドのように思えるが複数の要素を追加できないなど、様々なケースで異なる部分がある

Writer

株式会社flyhawkのSTです。フライテックメディア事業部でのメディア運営・ライター業務なども担当。愛機はMac Book AirとThinkPad。好きな言語：swift、JS系(Node.js等)。好きなサーバー：AWS。受託開発やプログラミングスクールの運営をしております。ご気軽にお問い合わせください。

【jQuery】has()を使って指定した要素を持つ場合に処理する！

【jQuery】:selectedを使って選択された要素を指定する！