jquery：append()

このメソッドの説明

append()は、jQueryメソッドです。

セレクト要素の最後にHTML要素を追加したり、テキスト要素の後ろに文字を追加します。

メソッド

セレクタ.append( content )

パラメータ

content (文字列)（HTML）

追加したい文字列又はHTMLを指定します。

利用例

１.テキスト要素の後ろに文字追加をする

下記の追加ボタンを挿入して下さい。文字が追加されます。

上記は下記のプログラムから構成されています。

①HTML

<div class='base_text'>お元気ですか？</div>
<button class='add_button'>追加</button>

②jQuery

追加ボタンを挿入した時に、文字列の最後に「山田さん」を追加します。

$(function(){
  $('.add_button').click(function(){
 		$('.base_text').append('山田さん');
  });
});

■追加する部分は下記の様な書き方もできます。

Var Text = $('.base_text').text();
$('.base_text').text(Text + '山田さん');

上記よりappend()を利用した方が簡単に記述できます。

2.select要素の「最後」にHTML要素を追加する

選択項目を確認後、追加ボタンを挿入して下さい。

項目4が追加され、これが選択されます。

上記は下記のプログラムから構成されています。

①HTML

<select name='select_name' class='select_class' > 
  <option value='#none#'>選択してください</option> 
  <option value='1'>項目1</option> 
  <option value='2'>項目2</option> 
  <option value='3'>項目3</option> 
</select>
<br>	
<button class='add_button1'>追加</button>

②jQuery

上記のHTMLに、項目4を追加し、それを選択する処理を下記で行います。

$(function(){
  $('.add_button1').click(function(){
    $('.select_class').append('<option  selected="selected" value="4">項目4</option>');
  });
});

関連情報

append()は最後に追加しましたが、先頭に追加する場合は prepend() を利用します。

使い方は同じです。