jQuery API の prependTo( target ) は、targetにマッチした要素内のコンテンツの先頭に、HTMLコンテンツを追加するメソッド。
記述方法
jQuery( HTMLコンテンツ ) . prependTo( セレクター );
「セレクター」に指定した要素内のコンテンツの先頭に、「HTMLコンテンツ」に指定したHTMLコンテンツを追加。
記述例
jQuery( '<span style="color: red;">サンプル</span>' ) . prependTo( '#jquery-sample' );
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( str ) . prependTo( '#jquery-sample-prependTo' );
} );
jQuery( '#jquery-sample-prependTo > span' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-div > span' ) . click( function () {
var str = jQuery( this ) . html();
jQuery( str ) . prependTo( '#jquery-sample-prependTo' );
} );
jQuery( '#jquery-sample-prependTo > span' ) . live( 'click', function () {
jQuery( this ) . remove();
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample-div span,
#jquery-sample-prependTo 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>
<!--
#jquery-sample-div span,
#jquery-sample-prependTo 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-prependTo"></span></p>
<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-prependTo"></span></p>