.html()と違い、.text()はXML、HTMLの両方で利用可能。
戻り値は jQueryオブジェクトにセットされている要素のテキストを1つにまとめたもの。
ブラウザのHTMLパーサの違いにより改行や空白に違いがでます。
.text()メソッドはFormのinput要素、scriptには利用できません。inputや textarea にテキストを設定するには.val()を利用します。
また1.4以降、CDATAノードのテキストを取得できます。
サンプル
実行結果
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- Internals
.text()で取得したもの
Javascript
$('.jq-sample1 :button').on('click', function(){
$('.jq-sample1 .screen').text($('.jq-sample1 li').text());
});
HTML
<div class="jq-sample1">
<button class="cq-btn m-primary">execute</button>
<ul>
<li>jQuery Core</li>
<li>Selectors</li>
<li>Attributes</li>
<li>Traversing</li>
<li>Manipulation</li>
<li>CSS</li>
<li>Events</li>
<li>Effects</li>
<li>Ajax</li>
<li>Utilities</li>
<li>Internals</li>
</ul>
<h5 class="headline-output">.text()で取得したもの</h5>
<div class="screen">
</div>
</div>
jQueryオブジェクトにセットされているDOM要素のテキストデータを textString に変更する。
textString にHTMLタグが含まれている場合、エスケープされる。
サンプル
実行結果
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- Internals
Javascript
$('.jq-sample2 :button').on('click', function(){
$('.jq-sample2 li')
.text('<span style="font-weight: bold">TEXT</span>')
.css({color: "red"});
});
HTML
<div class="jq-sample2">
<button class="cq-btn m-primary">execute</button>
<ul>
<li>jQuery Core</li>
<li>Selectors</li>
<li>Attributes</li>
<li>Traversing</li>
<li>Manipulation</li>
<li>CSS</li>
<li>Events</li>
<li>Effects</li>
<li>Ajax</li>
<li>Utilities</li>
<li>Internals</li>
</ul>
</div>
.text( function(index, text) )
引数
- function
- この関数が返す値が挿入される。
サンプル
実行結果
- jQuery Core
- Selectors
- Attributes
- Traversing
- Manipulation
- CSS
- Events
- Effects
- Ajax
- Utilities
- Internals
Javascript
$('.jq-sample3 :button').on('click', function(){
$('.jq-sample3 li')
.text(function(index, text){
return index + ' : ' + text;
})
.css({color: "red"});
});
HTML
<div class="jq-sample3">
<button class="cq-btn m-primary">execute</button>
<ul>
<li>jQuery Core</li>
<li>Selectors</li>
<li>Attributes</li>
<li>Traversing</li>
<li>Manipulation</li>
<li>CSS</li>
<li>Events</li>
<li>Effects</li>
<li>Ajax</li>
<li>Utilities</li>
<li>Internals</li>
</ul>
</div>