
卒業生インタビュー
2021.03.03
【卒業生の声:森さん】文系の僕がプログラミングの道へ進むことは、不安も迷いもあった。今は、あの時思い切って良かったと心から思います
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
jQuery
2018.07.26
jQuery の append メソッドを使用すると、指定した HTML 要素の下に テキストや別の要素を追加することができます。
今回は、jQuery の append メソッドについてサンプル等を紹介したいと思います。
1.append メソッド
2.append でテキストを追加
3.append で HTML 要素を追加
jQuery の append メソッドは、指定した HTML 要素の下に テキストや別の要素を追加するメソッドです。
次のように記述して使用します。
$( セレクタ ). append( 追加する要素 );
セレクタで HTML 要素を特定して、append メソッドを呼び出し、追加する要素を指定します。
append メソッドを使用して、テキストを追加します。
任意のテキストを入力して「 append 」ボタンを何度かクリックしてみて下さい。
出力:
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { $("#btn").click(function(){ $("#out_dat").append($("#in_dat").val()); }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 0px;"> <input type="text" id="in_dat" placeholder="テキストを入力して下さい。"> <input type="button" id="btn" value=" append "> <div id="out_dat" style="padding : 0px 10px;"></div> </div>
append メソッドと同様に、html メソッドを使用しても、入力されたテキストが表示されます。
上のサンプルと同様に、任意のテキストを入力して「 html 」ボタンを何度かクリックしてみて下さい。
出力:
append メソッドは 呼び出される度に入力されたテキストが追加表示されるのに対して、html メソッドは 呼び出し回数に関係なく入力されたテキストがそのまま表示されます。
また、html メソッドを使用すると、指定した要素に 既に表示されているテキストがある場合は、新たに入力されたテキストがそれを上書きする形で表示されます。
今度は append メソッドを使用して、HTML 要素を追加します。
カテゴリ追加ボタンを何度かクリックしてみて下さい。
上のサンプルのソースコードは次の通りです。
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script type="text/javascript"> <!-- $(function() { var i = 3; $("#wk_btn").click(function(){ $("#wk_ul").append("\<li\>カテゴリ" + i + "\<\/li\>"); i++; }); }); //--> </script> <div style="background-color : #CCC; padding : 20px 20px 10px;"> <nobr><input type="button" id="wk_btn" value="カテゴリ追加"></nobr> <ul id="wk_ul"> <li>カテゴリ1</li> <li>カテゴリ2</li> </ul> </div>
HTML 要素の記述で使用する「 < 」「 > 」「 / 」等の特殊文字は、バックスラッシュ( \ )でエスケープする必要があるのでご注意下さい。
卒業生インタビュー
2021.03.03
受講スクール プログラマカレッジ 受講期間 昼間コース(3ヶ月間) 料金 無料 就職先 株式会社イーゼ プログラマカレッジ卒業生の森さんにお話しをお伺いしました! 目次 開発学という観点からSDGsについて学んだ院生活。 […]
スキルアップ
2021.03.03
プログラミング学習は「挫折しやすい」というイメージがありますよね。実際に学習を始めてみて、挫折しそうだと感じている方もいらっしゃるでしょう。本記事では、プログラミング学習で挫折する4つの原因を解説。さらに、プログラミング […]
スキルアップ
2021.03.02
未経験からプログラマーを目指しているものの「自分はプログラミングに向いているのかわからない」という不安から、プログラミング学習に踏み切れない人も多いでしょう。そこで本記事では、プログラミングに向いている人や向いていない人 […]
スキルアップ
2021.02.25
プログラミング初心者で、最速で技術を身につけたいと考えている人の悩みを解決します。 後述しますが、「1000時間ルール」という法則がありプログラミング初心者の方はまず1000時間の学習を目標にしましょう。今回は、プログラ […]
スキルアップ
2021.02.22
「プログラミングスクールが多すぎて選び方の基準がわからない」「スクール選びに失敗してお金も時間も無駄にすることだけはしたくない」そんな初心者の方に向けて、この記事では自分に合ったプログラミングスクールの選び方を解説します […]
プログラマハック
2021.02.19
フリーターからプログラマーになろうとしている方の中には「未経験者でも正社員として採用してもらえるか?」「自分は職歴なしのフリーターだけど、本当にプログラマーになれるのだろうか?」と不安を感じている方も多いはず。そこで今回 […]
INTERNOUS,inc. All rights reserved.