jQueryでのappendメソッドの使い方|コード付きでわかりやすく紹介

- システム
エンジニア - jQueryでのappendメソッドを使用すると、どのようなことができるのでしょうか。
- プロジェクト
マネージャー - appendメソッドを使用すれば、指定要素にテキストやHTMLを追加できます。
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メソッドの使い方をより理解するために、一度に複数要素を追加など、ソースコードを書いてみましょう。
まとめ
いかがでしたでしょうか。jQueryでのappendメソッドの使い方について説明しました。
appendメソッドを使用すれば、指定要素にテキストやHTMLを追加できます。一度に複数要素を追加することもできますし、removeで削除した要素を追加することもできます。
ぜひご自身でソースコードを書いて、理解を深めてください。
FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。
株式会社オープンアップシステムはこんな会社です
秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結!
数多くのエンジニアが集まります。

-
スマホアプリから業務系システムまで
スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
-
充実した研修制度
毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
-
資格取得を応援
スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
-
東証プライム上場企業グループ
オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。
安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。
株式会社オープンアップシステムに興味を持った方へ
株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。
年収をアップしたい!スキルアップしたい!大手の上流案件にチャレンジしたい!
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。


新着案件New Job
開発エンジニア/東京都品川区/【WEB面談可】/在宅ワーク
月給29万~30万円東京都品川区(大崎駅)遠隔テストサービス機能改修/JavaScript/東京都港区/【WEB面談可】/テレワーク
月給45万~60万円東京都港区(六本木駅)病院内システムの不具合対応、保守/東京都豊島区/【WEB面談可】/テレワーク
月給30万~30万円東京都豊島区(池袋駅)開発/JavaScript/東京都豊島区/【WEB面談可】/テレワーク
月給50万~50万円東京都豊島区(大塚駅)債権債務システム追加開発/東京都文京区/【WEB面談可】/在宅勤務
月給62万~67万円東京都文京区(後楽園駅)PMO/東京都豊島区/【WEB面談可】/在宅勤務
月給55万~55万円東京都豊島区(池袋駅)