jQuery【append】テキストや要素の追加

jQuery の append メソッドを使用すると、指定した HTML 要素の下に テキストや別の要素を追加することができます。
今回は、jQuery の append メソッドについてサンプル等を解説いたします。

1. append メソッド

　
jQuery の append メソッドは、指定した HTML 要素の下に テキストや別の要素を追加するメソッドです。

次のように記述して使用します。

$( セレクタ ).append( 追加する要素 );

セレクタで HTML 要素を特定して、append メソッドを呼び出し、追加する要素を指定します。

▲目次へ戻る

2. 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 メソッド

append メソッドと同様に、html メソッドを使用しても、入力されたテキストが表示されます。
上のサンプルと同様に、任意のテキストを入力して「 html 」ボタンを何度かクリックしてみて下さい。

append メソッドは 呼び出される度に入力されたテキストが追加表示されるのに対して、html メソッドは 呼び出し回数に関係なく入力されたテキストがそのまま表示されます。

また、html メソッドを使用すると、指定した要素に 既に表示されているテキストがある場合は、新たに入力されたテキストがそれを上書きする形で表示されます。

▲目次へ戻る

3. append で 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 要素の記述で使用する「 < 」「 > 」「 / 」等の特殊文字は、バックスラッシュ（ \ ）でエスケープする必要があるのでご注意下さい。

▲目次へ戻る

4. まとめ

jQueryの append メソッドについて、いかがでしたでしょうか。

「Webプログラマになりたいけど、独力では限界がある」と感じている方には、「プログラマカレッジ」がおすすめです。
「プログラマカレッジ」は本気でプログラマを目指す方のための、就職支援付き、受講料無料のプログラミングスクールです。

今回ご紹介した「jQuery」を含む豊富なカリキュラムで、IT初心者からWebプログラマとして就職するまで、プロが完全にサポートします。
本気でプログラマとして就職・転職したいという方は、一度のぞいてみてはいかがでしょうか。

→ 就職支援付き無料プログラミングスクール「プログラマカレッジ」

▲目次へ戻る