jQuery API の insertBefore( target ) は、targetにマッチした要素の前に、HTMLコンテンツを追加するメソッド。追加したHTMLコンテンツは、マッチした要素の兄要素となる。
記述方法
jQuery( HTMLコンテンツ ) . insertBefore( セレクター );
「セレクター」に指定した要素の前に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。
記述例
jQuery( '<span style="color: red;">サンプル</span>' ) . insertBefore( '#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-insertBefore">追加項目</li>' ) . insertBefore( this );
} );
jQuery( '.jquery-sample-li-insertBefore' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-li' ) . click( function () {
jQuery( '<li class="jquery-sample-li-insertBefore">追加項目</li>' ) . insertBefore( this );
} );
jQuery( '.jquery-sample-li-insertBefore' ) . 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>