appendメソッド
メソッド append は、要素の末尾に
テキストを追加します。同様の動作をする
メソッド appendTo
もあります。
構文
要素の末尾へのテキスト挿入:
$(セレクター).append(テキスト);
選択された要素の末尾には、ユーザー定義関数によって 返されるテキストを追加することができます。 この関数は、選択された各要素に対して個別に 呼び出されます。呼び出し時には、次のパラメータが 渡されます:セット内での要素の位置、 要素の現在の内容:
$(セレクター).append(function(セット内の番号, 要素の現在の内容));
内容は通常のテキストだけでなく、DOM要素や jQueryオブジェクトにすることもできます。 この場合、それらの要素はHTMLコード内の 元の位置から移動されます。
例
指定された段落の末尾にテキストを挿入してみましょう:
<p id="test">text</p>
$('#test').append('!!!');
HTMLコードは以下のようになります:
<p id="test">text!!!</p>
例
指定された段落の末尾にタグ付きのテキストを 挿入してみましょう:
<p id="test">text</p>
$('#test').append('<b>!!!</b>');
HTMLコードは以下のようになります:
<p id="test">text<b>!!!</b></p>
例
すべての段落を見つけ、それぞれの末尾に セット内での順序番号を付けてみましょう:
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
<p>text</p>
$('p').append(function(index, text){return index;});
HTMLコードは以下のようになります:
<p>text0</p>
<p>text1</p>
<p>text2</p>
<p>text3</p>
<p>text4</p>