jQuery API の insertAfter( target ) は、targetにマッチした要素の後に、HTMLコンテンツを追加するメソッド。追加したHTMLコンテンツは、マッチした要素の弟要素となる。
記述方法
jQuery( HTMLコンテンツ ) . insertAfter( セレクター );
「セレクター」に指定した要素の後に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。
記述例
jQuery( '<span style="color: red;">サンプル</span>' ) . insertAfter( '#jquery-sample' );
idが「jquery-sample」の要素の後に、<span style="color: red;">サンプル</span>を追加。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「項目１～３」をクリックすると、クリックした項目の下に「追加項目」という項目を追加する。
「追加項目」をクリックすると、クリックした項目を削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-li' ) . click( function () {
jQuery( '<li class="jquery-sample-li-insertAfter">追加項目</li>' ) . insertAfter( this );
} );
jQuery( '.jquery-sample-li-insertAfter' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-li' ) . click( function () {
jQuery( '<li class="jquery-sample-li-insertAfter">追加項目</li>' ) . insertAfter( this );
} );
jQuery( '.jquery-sample-li-insertAfter' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-ul li {
cursor: pointer;
}
-->
</style>
<!--
#jquery-sample-ul li {
cursor: pointer;
}
-->
</style>
HTML
<ul id="jquery-sample-ul">
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>
<li class="jquery-sample-li">項目１</li>
<li class="jquery-sample-li">項目２</li>
<li class="jquery-sample-li">項目３</li>
</ul>