prepend( content[, content] )

jQuery API の prepend( content[, content] ) は、マッチした要素内のコンテンツの先頭に、contentに指定したHTMLコンテンツを追加するメソッド。カンマで区切り、複数のcontentを指定することもできる。

記述方法

jQuery( セレクター ) . prepend( HTMLコンテンツ );

「セレクター」に指定した要素内のコンテンツの先頭に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。

記述例

jQuery( '#jquery-sample' ) . prepend( '<span style="color: red;">サンプル</span>' );

idが「jquery-sample」の要素内のHTMLコンテンツの先頭に、<span style="color: red;">サンプル</span>を追加。

実装例(サンプル)

 赤   青   緑 

色を追加:

実装例(サンプル)の動作について

 赤  青  緑  のいづれかをクリックすると、「色を追加: 」の右側に、クリックした色を追加する。

「色を追加: 」の右側に追加した色をクリックすると、クリックした要素を削除する。

実装例(サンプル)のソースコード

JavaScript

<script>
<!--
jQuery( function() {
    jQuery( '#jquery-sample-div > span' ) . click( function () {
        var str = jQuery( this ) . html();
        jQuery( '#jquery-sample-prepend' ) . prepend( str );
    } );
    jQuery( '#jquery-sample-prepend > span' ) . live( 'click', function () {
        jQuery( this ) . remove();
    } );
} );
// -->
</script>

CSS

<style type="text/css">
<!--
#jquery-sample-div span,
#jquery-sample-prepend span {
    cursor: pointer;
}
.jquery-sample-red {
    background-color: red;
    color: white;
    border-radius: 5px;
}
.jquery-sample-blue {
    background-color: blue;
    color: white;
    border-radius: 5px;
}
.jquery-sample-green {
    background-color: green;
    color: white;
    border-radius: 5px;
}
-->
</style>

HTML

<div id="jquery-sample-div">
    <span>
        <span class="jquery-sample-red"> 赤 </span>
    </span>
    <span>
        <span class="jquery-sample-blue"> 青 </span>
    </span>
    <span>
        <span class="jquery-sample-green"> 緑 </span>
    </span>
</div>
<p>色を追加: <span id="jquery-sample-prepend"></span></p>

スポンサード リンク

カテゴリー: API, DOM挿入, DOM操作, JavaScript, jQuery, 内部 タグ: パーマリンク