ITコラム

jQuery

2018.07.26

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 要素を追加します。
カテゴリ追加ボタンを何度かクリックしてみて下さい。

カテゴリ1
カテゴリ2

　
上のサンプルのソースコードは次の通りです。

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

▲目次へ戻る