text( textString )

jQuery API の text( textString ) は、マッチした要素内を、textStringに指定した文字列のテキストノードに設定するメソッド。

記述方法

jQuery( セレクター ) . text( 文字列 );

「セレクター」に指定した要素内を「文字列」のテキストノードに設定。

記述例

jQuery( '#jquery-sample' ) . text( 'サンプル' );

idが「jquery-sample」の要素内を、「サンプル」のテキストノードに設定。

実装例(サンプル)

 赤   青   緑 

一番好きな色:

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

 赤  青  緑 のいづれかをクリックすると、「一番好きな色: 」の右側に、クリックした色を表示する。

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

JavaScript

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

CSS

<style type="text/css">
<!--
#jquery-sample-div span {
    cursor: pointer;
}
.jquery-sample-red {
    background-color: red;
    color: white;
}
.jquery-sample-blue {
    background-color: blue;
    color: white;
}
.jquery-sample-green {
    background-color: green;
    color: white;
}
-->
</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-text"></span></p>

スポンサード リンク

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