（リライト）jQueryでappendメソッドを使って要素を追加する方法【初心者向け】

JavaScriptのライブラリであるjQueryでappendを使って要素を追加する方法を解説しています。

Webデザインをしていて、ユーザーがボタンを押すと何か表示したい、追加したいといった要望が出ることが良くあります。そんな時に役に立つのがappendメソッドです。今回はそんなappendメソッドについて解説していきたいと思います。

jQueryについてそもそもよく分からないという方は、jQueryとは何なのか解説した記事をまずご覧ください。

本記事はJavaScriptを学べる、テックアカデミーのフロントエンドコースの内容をもとにしています。

appendメソッドとは

appendメソッドはhtml要素を動的に追加することができるメソッドです。

appendメソッドを使用すればほんの数行でhtml要素を追加することができるのでとても便利です。

今回の記事の内容は動画でもご覧いただけます。

テキストよりも動画の方が理解しやすいという場合はぜひご覧ください。

田島メンター！ある要素のCSSを変更する方法はわかったのですが、要素を追加する方法ってありますか？

もちろん。要素の追加・新規作成・削除・変更があるね。

たくさんあるんですねー。

だいたいそういうのがあるって覚えるといいよ。では、要素を追加してみよう！

appendと似た役割を持つメソッド

prepend()

before()

after()

についてそれぞれ説明する。（h3）その際既存で記事があれば内部リンクで繋げる。

appendメソッドの書き方

先述の通りappendメソッドはとても簡単に書くことができます。

$(‘セレクタ’).append(‘追加するもの’);

セレクタでクラス、ID指定をした後に、appendを呼び出し、追加するものを指定します。

実際に書いてみよう

それでは簡単にappendの処理を書いていきましょう。今回はボタンをクリックするとulタグ内にli要素が追加されていくプログラムを書いていきたいと思います。以下がコードです。

HTML

<!DOCTYPE html>
 <html>
 <head>
 <meta charset="utf-8">
 <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
 <script>
 $(function() {
 $("button").click(function() {
 $("ul").append("<li>追加</li>");
 });
 });
 </script>
 </head>
 <body>
 <button>button</button>
 <ul>
 </ul>
 </body>
 </html>

ボタンクリックの際に発火するイベントを作成して、その中でappendメソッドを実行しています。

セレクタではulタグを指定してそのセレクタを対象にliタグを追加するappendメソッドを書いています。

そのためボタンを押すたびにappendメソッドが呼ばれ、要素が増えていきます。以下のようになれば成功です。

まとめ

今回はappendメソッドについて解説していきました。

appendメソッドを使用すれば簡単にhtml要素を追加することが分かっていただけたと思います。今回はliタグを追加するという簡単な処理でしたが、使いこなせばポップアップやスライドインメニューを追加するなんてこともできます。

ボタンを押すと、ulタグの中にliタグが増えていきますね。

(セレクター).append()では、一番後ろに追加されていくんだ。前から追加していくメソッドもあるし、削除するメソッドもあるよ。

応用すると、色々なことに使えそうですね！

そうそう。けっこう技巧的なことが出来るんだよ。JavaScriptやjQueryはPHPなどの言語とも連帯できるので、応用の幅は広いんだ。

監修してくれたメンター

中本賢吾（なかもとけんご）

アジマッチ有限会社　代表取締役社長開発実績：事業会社向け新規事業SNS構築・Shopify海外進出ネットショップ構築、AWSや専用サーバー下でLinuxを使用したセキュアな環境構築、人工知能を利用した画像解析、店舗検索スマホアプリ開発、不動産賃貸・売買事業者様向けWEBシステム、政府系金融機関向けVue.jsによるフロントエンド開発、など。

ボランティアでプログラミング学校を運営し、中学生がノーコードチャットアプリリリース、小学生がオリジナルAndroidアプリをGooglePlayでリリース、NHK Whyプログラミング入賞、全国Programing Festival入賞など実績多数。

JavaScriptを学習中の方へ

これで解説は終了です、お疲れさまでした。

つまずかず「効率的に」学びたい

副業や転職後の「現場で使える」知識やスキルを身につけたい

プログラミングを学習していて、このように思ったことはありませんか？

テックアカデミーのフロントエンドコースでは、第一線で活躍する「プロのエンジニア」が教えているので、効率的に実践的なスキルを完全オンラインでしっかり習得できます。

合格率10%の選考を通過した、選ばれたエンジニアの手厚いサポートを受けながら、JavaScript・jQueryを使ったWebサービス開発を完全オンラインでしっかり習得できます。

まずは一度、無料体験で学習の悩みや今後のキャリアについて話してみて、「現役エンジニアから教わること」を実感してみてください。

時間がない方、深く知ってから体験してみたい方は、今スグ見られる説明動画から先に視聴することをおすすめします！

The post （リライト）jQueryでappendメソッドを使って要素を追加する方法【初心者向け】 first appeared on TechAcademyマガジン.

アクセスランキング

Tips

A PHP Error was encountered
Severity: Notice
Message: Undefined offset: 0
Filename: smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php
Line Number: 41
Backtrace:
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php
Line: 41
Function: _error_handler
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3d14aa11_83151422
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/d064ec4523cd2f49c67136b7b84705846d19c90b_0.file.side.tpl.php
Line: 43
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b47775ef5_14228348
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 416
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 248
Function: callBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 184
Function: callBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 186
Function: process
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 156
Function: process
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/fbdaa42e51518f8881faeabdc1199f6dd175d1ce_0.file.base_index_layout.tpl.php
Line: 88
Function: instanceBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3cb92fa0_94546305
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 116
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 71
Function: endChild
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_675a781dcbf339_49719938
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 238
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 116
Function: _execute
File: /www/wwwroot/homev2.kingsoft.jp/application/libraries/SmartyLibrary.php
Line: 45
Function: fetch
File: /www/wwwroot/homev2.kingsoft.jp/application/controllers/ArticleController.php
Line: 32
Function: view
File: /www/wwwroot/homev2.kingsoft.jp/public/index.php
Line: 292
Function: require_once
A PHP Error was encountered
Severity: Notice
Message: Trying to access array offset on value of type null
Filename: smarty/49292b3df7e5bd60f7381ff16c5ca4532cf9476f_0.file.card.tpl.php
Line Number: 24
Backtrace:
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/49292b3df7e5bd60f7381ff16c5ca4532cf9476f_0.file.card.tpl.php
Line: 24
Function: _error_handler
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3d136f97_11902452
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 384
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php
Line: 41
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3d14aa11_83151422
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/d064ec4523cd2f49c67136b7b84705846d19c90b_0.file.side.tpl.php
Line: 43
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b47775ef5_14228348
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 416
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 248
Function: callBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 184
Function: callBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 186
Function: process
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 156
Function: process
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/fbdaa42e51518f8881faeabdc1199f6dd175d1ce_0.file.base_index_layout.tpl.php
Line: 88
Function: instanceBlock
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3cb92fa0_94546305
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 116
Function: _subTemplateRender
File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 71
Function: endChild
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_675a781dcbf339_49719938
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 238
Function: render
File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 116
Function: _execute
File: /www/wwwroot/homev2.kingsoft.jp/application/libraries/SmartyLibrary.php
Line: 45
Function: fetch
File: /www/wwwroot/homev2.kingsoft.jp/application/controllers/ArticleController.php
Line: 32
Function: view
File: /www/wwwroot/homev2.kingsoft.jp/public/index.php
Line: 292
Function: require_once

" class="text-decoration-none w-100" target="_blank">

A PHP Error was encountered

Severity: Notice

Message: Trying to access array offset on value of type null

Filename: smarty/49292b3df7e5bd60f7381ff16c5ca4532cf9476f_0.file.card.tpl.php

Line Number: 29

Backtrace:

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/49292b3df7e5bd60f7381ff16c5ca4532cf9476f_0.file.card.tpl.php
Line: 29
Function: _error_handler

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3d136f97_11902452

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 384
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php
Line: 41
Function: _subTemplateRender

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3d14aa11_83151422

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/d064ec4523cd2f49c67136b7b84705846d19c90b_0.file.side.tpl.php
Line: 43
Function: _subTemplateRender

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b47775ef5_14228348

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 416
Function: _subTemplateRender

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 248
Function: callBlock

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 184
Function: callBlock

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 186
Function: process

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 156
Function: process

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/fbdaa42e51518f8881faeabdc1199f6dd175d1ce_0.file.base_index_layout.tpl.php
Line: 88
Function: instanceBlock

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_66f26b3cb92fa0_94546305

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 386
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_runtime_inheritance.php
Line: 116
Function: _subTemplateRender

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/597cefa22c7600eaa32b117569a9685c70819274_0.file.show.tpl.php
Line: 71
Function: endChild

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_resource_base.php
Line: 123
Function: content_675a781dcbf339_49719938

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_template_compiled.php
Line: 114
Function: getRenderedTemplateCode

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_template.php
Line: 217
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 238
Function: render

File: /www/wwwroot/homev2.kingsoft.jp/application/third_party/smarty/libs/sysplugins/smarty_internal_templatebase.php
Line: 116
Function: _execute

File: /www/wwwroot/homev2.kingsoft.jp/application/libraries/SmartyLibrary.php
Line: 45
Function: fetch

File: /www/wwwroot/homev2.kingsoft.jp/application/controllers/ArticleController.php
Line: 32
Function: view

File: /www/wwwroot/homev2.kingsoft.jp/public/index.php
Line: 292
Function: require_once

A PHP Error was encountered

Severity: Notice

Message: Undefined offset: 1

Filename: smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php

Line Number: 41

Backtrace:

File: /www/wwwroot/homev2.kingsoft.jp/application/cache/smarty/08d1cc69876d91563afb9c1f4d21cc8b7b96caa4_0.file.tips.tpl.php
Line: 41
Function: _error_handler