replaceWith( newContent )

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>

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>

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>

スポンサード リンク

カテゴリー: API, DOM操作, DOM置換, JavaScript, jQuery タグ: パーマリンク