jQuery API の append( function( index, html ) ) は、function関数で指定したHTMLコンテンツを、マッチした要素内のコンテンツの最後に追加するメソッド。その際、インデックス番号と現在のHTMLコンテンツを、function関数に引き渡すことができる。１つ目の引数が、インデックス番号。２つ目の引数が、現在のHTMLコンテンツ。
記述方法
jQuery( セレクター ) . append( function( インデックス番号, 現在のHTMLコンテンツ ) {
return 追加するHTMLコンテンツ;
} );
return 追加するHTMLコンテンツ;
} );
「セレクター」に指定した要素内のコンテンツの最後に、function関数で指定したHTMLコンテンツを追加。インデックス番号と、現在のHTMLコンテンツを、function関数に引き渡すことができる。
記述例
jQuery( '#jquery-sample' ) . append( function( index, content ) {
return '<span style="color: red;">サンプル</span>';
} );
return '<span style="color: red;">サンプル</span>';
} );
idが「jquery-sample」の要素内のHTMLコンテンツの最後に、<span style="color: red;">サンプル</span>を追加。
実装例（サンプル）
実装例（サンプル）の動作について
「答え」ボタンをクリックすると、足し算、引き算、掛け算、割り算、剰余計算の答えを、計算式の右側に「=」に続けて表示する。
「問題」ボタンをクリックすると、計算式内の数字が変わる。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-questions' ) . click( function () {
jQuery( '#jquery-sample-ul > li' ) . remove();
var figuresA = Math . floor( Math . random() * 9) + 1;
var figuresB = Math . floor( Math . random() * 9) + 1;
jQuery( '#jquery-sample-ul' ) . append(
'<li>' + figuresA + '+' + figuresB + '</li>',
'<li>' + figuresA + '-' + figuresB + '</li>',
'<li>' + figuresA + '*' + figuresB + '</li>',
'<li>' + figuresA + '/' + figuresB + '</li>',
'<li>' + figuresA + '%' + figuresB + '</li>'
);
jQuery( '#jquery-sample-button-answers' ) . one( 'click', function () {
jQuery( '#jquery-sample-ul > li' ) . append( function( index, content ) {
return '=' + eval( content );
} );
} );
} ) . click();
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button-questions' ) . click( function () {
jQuery( '#jquery-sample-ul > li' ) . remove();
var figuresA = Math . floor( Math . random() * 9) + 1;
var figuresB = Math . floor( Math . random() * 9) + 1;
jQuery( '#jquery-sample-ul' ) . append(
'<li>' + figuresA + '+' + figuresB + '</li>',
'<li>' + figuresA + '-' + figuresB + '</li>',
'<li>' + figuresA + '*' + figuresB + '</li>',
'<li>' + figuresA + '/' + figuresB + '</li>',
'<li>' + figuresA + '%' + figuresB + '</li>'
);
jQuery( '#jquery-sample-button-answers' ) . one( 'click', function () {
jQuery( '#jquery-sample-ul > li' ) . append( function( index, content ) {
return '=' + eval( content );
} );
} );
} ) . click();
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-wrap {
padding: 10px;
background-color: #f0f0f0;
color: #303030;
border: 1px solid gray;
border-radius: 5px;
}
#jquery-sample-ul li {
margin: 10px;
letter-spacing: 0.5em;
list-style-type: none;
}
-->
</style>
<!--
#jquery-sample-wrap {
padding: 10px;
background-color: #f0f0f0;
color: #303030;
border: 1px solid gray;
border-radius: 5px;
}
#jquery-sample-ul li {
margin: 10px;
letter-spacing: 0.5em;
list-style-type: none;
}
-->
</style>
HTML
<div id="jquery-sample-wrap">
<p>
<button id="jquery-sample-button-questions">問題</button>
<button id="jquery-sample-button-answers">答え</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>
<p>
<button id="jquery-sample-button-questions">問題</button>
<button id="jquery-sample-button-answers">答え</button>
</p>
<ul id="jquery-sample-ul">
</ul>
</div>