jQuery API の before( content[, content] ) は、マッチした要素の前に、contentに指定したHTMLコンテンツを追加するメソッド。カンマで区切り、複数のcontentを指定することもできる。追加したHTMLコンテンツは、マッチした要素の兄要素となる。
記述方法
jQuery( セレクター ) . before( HTMLコンテンツ );
「セレクター」に指定した要素の前に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。
記述例
jQuery( '#jquery-sample' ) . before( '<span style="color: red;">サンプル</span>' );
idが「jquery-sample」の要素の前に、<span style="color: red;">サンプル</span>を追加。
実装例（サンプル）
- 項目１
- 項目２
- 項目３
実装例（サンプル）の動作について
「項目１～３」をクリックすると、クリックした項目の上に「追加項目」という項目を追加する。
「追加項目」をクリックすると、クリックした項目を削除する。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-li' ) . click( function () {
jQuery( this ) . before( '<li class="jquery-sample-li-before">追加項目</li>' );
} );
jQuery( '.jquery-sample-li-before' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '.jquery-sample-li' ) . click( function () {
jQuery( this ) . before( '<li class="jquery-sample-li-before">追加項目</li>' );
} );
jQuery( '.jquery-sample-li-before' ) . 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>