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