jQuery API の replaceWith( function ) は、マッチした要素を、function関数で指定したHTMLコンテンツに置き換えるメソッド。
記述方法
jQuery( セレクター ) . replaceWith( function() {
return HTMLコンテンツ;
} );
return HTMLコンテンツ;
} );
「セレクター」に指定した要素を、「HTMLコンテンツ」に指定したHTMLコンテンツに置き換える。
記述例
jQuery( '.jquery-sample' ) . replaceWith( function() {
return '<span>サンプル</span>';
} );
return '<span>サンプル</span>';
} );
クラス名が「jquery-sample」の要素を、<span>サンプル</span>に置き換える。
実装例（サンプル）
3 + ？ = 5
？ × 5 = 25
15 - 8 = ？
実装例（サンプル）の動作について
？をクリックすると、答えを表示する。
「答えを隠す」ボタンをクリックすると、？に置き換える。
実装例（サンプル）のソースコード
JavaScript
<script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '.jquery-sample-show' ) . replaceWith( function() {
return '<span class="jquery-sample-hide" answer="' + jQuery( this ) . attr( 'answer' ) + '">？</span>';
} );
} );
jQuery( '.jquery-sample-hide' ) . live( 'click', function () {
jQuery( this ) . replaceWith( function() {
return '<span class="jquery-sample-show" answer="' + jQuery( this ) . attr( 'answer' ) + '">' + jQuery( this ) . attr( 'answer' ) + '</span>';
} );
} );
} );
// -->
</script>
<!--
jQuery( function() {
jQuery( '#jquery-sample-button' ) . click( function () {
jQuery( '.jquery-sample-show' ) . replaceWith( function() {
return '<span class="jquery-sample-hide" answer="' + jQuery( this ) . attr( 'answer' ) + '">？</span>';
} );
} );
jQuery( '.jquery-sample-hide' ) . live( 'click', function () {
jQuery( this ) . replaceWith( function() {
return '<span class="jquery-sample-show" answer="' + jQuery( this ) . attr( 'answer' ) + '">' + jQuery( this ) . attr( 'answer' ) + '</span>';
} );
} );
} );
// -->
</script>
CSS
<style type="text/css">
<!--
#jquery-sample {
margin: 10px 5px;
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
.jquery-sample-hide {
padding: 0 10px;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
.jquery-sample-show {
padding: 0 10px;
background-color: white;
border: 1px solid gray;
}
-->
</style>
<!--
#jquery-sample {
margin: 10px 5px;
padding: 10px 20px;
background-color: #f0f0f0;
border: 1px solid gray;
border-radius: 10px;
}
.jquery-sample-hide {
padding: 0 10px;
background-color: white;
border: 1px solid gray;
cursor: pointer;
}
.jquery-sample-show {
padding: 0 10px;
background-color: white;
border: 1px solid gray;
}
-->
</style>
HTML
<p>
<button id="jquery-sample-button">答えを隠す</button>
</p>
<div id="jquery-sample">
<p>3 + <span class="jquery-sample-hide" answer="2">？</span> = 5</p>
<p><span class="jquery-sample-hide" answer="5">？</span> × 5 = 25</p>
<p>15 - 8 = <span class="jquery-sample-hide" answer="7">？</span></p>
</div>
<button id="jquery-sample-button">答えを隠す</button>
</p>
<div id="jquery-sample">
<p>3 + <span class="jquery-sample-hide" answer="2">？</span> = 5</p>
<p><span class="jquery-sample-hide" answer="5">？</span> × 5 = 25</p>
<p>15 - 8 = <span class="jquery-sample-hide" answer="7">？</span></p>
</div>