.text()【要素内容 取得・設定 (テキスト)】

メモ

  • 要素内容のテキスト 取得
    • 該当要素 (子孫を含む)の結合したテキストコンテンツを取得
    • ブラウザのHTMLパーサーの違いにより結果が違う可能性有り (改行・空白 等)
  • 要素内容のテキスト 設定
    • DOMメソッドの .createTextNode() を使用してエスケープ処理
  • 要素内容のテキスト 取得・設定 (共通)

構文

説明構文戻り値
要素テキスト 取得 .text() 1.0 String
要素テキスト 置換 .text( text ) 1.0

String Number Boolean text：要素テキスト
jQuery
.text( function ) 1.4

function( [ index [, text ] ] )
引数説明
Integer indexインデックス (0～)
String text元の要素テキスト
(this)処理中DOM要素
戻り値説明
String置換するテキストコンテンツ
jQuery

関連

例

<style>
.border { border:1px black solid; padding:1px 5px; }
.color1 { color:red; }
.bold { font-weight:bold; }
</style>

<div id="id1">
  <p id="id10" class="border"><span class="color1">コンテンツ</span></p>
  <p>.html() <span id="id11" class="border"></span> <span id="id12" class="border"></span></p>
  <p>.text() <span id="id13" class="border"></span> <span id="id14" class="border"></span></p>

  <ol id="id15">
  <li>項目１
    <ol>
    <li>項目１-１
    <li>項目１-２
    </ol>
  <li>項目２
  <li>項目３
  </ol>
  <p id="id16" class="border"></p>

  <span class="class1 border color1">コンテンツ１</span>
  <span class="class1 border color1">コンテンツ２</span>
  <span class="class1 border color1">コンテンツ３</span>
  <p id="id17" class="border"></p>
  
  <p><span class="border class2">コンテンツ</span> <span class="border class2">コンテンツ</span></p>
</div>

<script>
var html = $( "#id10" ).html();
$( "#id11" ).html(html);
$( "#id12" ).text(html);

var text = $( "#id10" ).text();
$( "#id13" ).html(text);
$( "#id14" ).text(text);

text = $( "#id15" ).text();
$( "#id16" ).text(text);

text = $( ".class1" ).text();
$( "#id17" ).text(text);

$( "#id1 .class2" ).text(function(index, text) {
  var contents = "[" + index + "] " + text;
  return contents;
});
</script>

コンテンツ

.html()

.text()

  1. 項目１
    1. 項目１-１
    2. 項目１-２
  2. 項目２
  3. 項目３

コンテンツ１ コンテンツ２ コンテンツ３

コンテンツ コンテンツ