jQueryでのappendメソッドの使い方｜コード付きでわかりやすく紹介
目次
jQueryでのappendメソッドの使い方とは？
今回は、jQueryでのappendメソッドの使い方について説明します。appendメソッドを使用すれば、指定要素にテキストやHTMLを追加できます。
ここでは、基本的な使い方、class指定/id指定で追加、複数の追加、要素の削除/追加、先頭に追加（prepend）について紹介します。
jQueryでのappendメソッドの使い方に興味のある方はぜひご覧ください。
基本的な使い方
jQueryでのappendメソッドの基本的な使い方を紹介します。要素を指定して、テキストやHTMLを追加できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <p>テキスト1</p> <p>テキスト2</p> <ul> <li>リスト1</li> <li>リスト2</li> </ul> </div> </body> </html> |
|
1 2 3 4 5 6 7 |
$(function(){ // p要素にappend $('p').append(' append string'); // ulにappend $('ul').append('<li>リスト3</li>'); }); |
See the Pen
jquery_append1 by kskumd (@kskumd)
on CodePen.
class指定/id指定で追加
jQueryでは、class指定/id指定で要素を追加できます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div class="div1"> <p id = "p1">テキスト1</p> <p id = "p1">テキスト2</p> <ul> <li>リスト1</li> <li>リスト2</li> </ul> </div> </body> </html> |
|
1 2 3 4 5 6 7 |
$(function(){ // class指定でappend $('.div1').append('<p>class指定でappend</p>'); // id指定でappend $('#p1').append(' id指定でappend'); }); |
See the Pen
jquery_append2 by kskumd (@kskumd)
on CodePen.
このようにjQueryでは、class指定/id指定で要素を追加できます。
複数の追加
jQueryでは、一度に複数要素を追加できます。追加する要素をカンマ区切りで指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <p>テキスト1</p> <p>テキスト2</p> <ul> <li>リスト1</li> <li>リスト2</li> </ul> </div> </body> </html> |
|
1 2 3 4 5 6 7 |
$(function(){ // p要素にappend $('p').append(' append string1', ' append string2'); // ulにappend $('ul').append('<li>リスト3</li>', '<li>リスト4</li>'); }); |
See the Pen
jquery_append3 by kskumd (@kskumd)
on CodePen.
このようにjQueryでは、一度に複数要素を追加できます。
要素の削除/追加
jQueryでの、削除した要素の追加方法を紹介します。削除した要素を変数に格納し、appendメソッドで追加させます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <p>テキスト1</p> <p>テキスト2</p> </div> <input type="button" id="btn1" value="remove"> <input type="button" id="btn2" value="append"> </body> </html> |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
$(function(){ var d; // 要素の削除 $("#btn1").on("click", function() { d = $('p').remove(); }); // 要素の復活 $("#btn2").on("click", function() { $('div').append(d); }); }); |
See the Pen
jquery_append4 by kskumd (@kskumd)
on CodePen.
先頭に追加（prepend）
jQueryでの、appendメソッドによく似たメソッドにprependメソッドがあります。appendメソッドは要素の末尾に追加しますが、prependメソッドは要素の先頭に追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<html> <head> <meta charset="utf-8"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> </head> <body> <div> <p>テキスト1</p> <p>テキスト2</p> <ul> <li>リスト1</li> <li>リスト2</li> </ul> </div> </body> </html> |
|
1 2 3 4 5 6 7 |
$(function(){ // p要素にprepend $('p').prepend('append string '); // ulにprepend $('ul').prepend('<li>リスト3</li>'); }); |
See the Pen
jquery_append5 by kskumd (@kskumd)
on CodePen.
このようにjQueryでは、prependメソッドを使用すれば要素の先頭に追加できます。
まとめ
いかがでしたでしょうか。jQueryでのappendメソッドの使い方について説明しました。
appendメソッドを使用すれば、指定要素にテキストやHTMLを追加できます。一度に複数要素を追加することもできますし、removeで削除した要素を追加することもできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
