HTML要素.innerText

対応:		HTML5（2014）

HTML要素の表示テキストを取得・設定するプロパティです。CSSで非表示にされたテキストは取得されないため、画面に実際に表示されている内容だけを扱います。

構文

// 表示テキストを取得します。
var text = element.innerText;

// テキストを設定します。
element.innerText = "新しいテキスト";

サンプルコード

sample_innerText.html

<div id="profile">
	<p id="name">狡噛慎也</p>
	<p id="rank" style="display: none;">執行官</p>
	<span id="division">公安局1課</span>
</div>
<p id="status">現役</p>

sample_innerText.js

var profile = document.getElementById("profile");

// パターン1: innerText は画面に表示されているテキストのみを取得する
console.log(profile.innerText);
// 非表示の『執行官』は含まれません。

// パターン2: textContent はCSSの表示状態に関係なくすべてのテキストを取得する
console.log(profile.textContent);
// 非表示の『執行官』も含まれます。

// パターン3: テキストを設定する（子要素はすべて置き換えられる）
var status = document.getElementById("status");
status.innerText = "潜伏中";

// パターン4: innerText でテキスト中の改行を確認する
var name = document.getElementById("name");
console.log(name.innerText); // 『狡噛慎也』と出力されます。

// パターン5: 個別要素のテキストを書き換える
var division = document.getElementById("division");
division.innerText = "海外任務中";

サンプルページはこちら

innerTextとtextContentの違い

プロパティ	概要
innerText	画面に表示されているテキストのみを返します。CSSで非表示にされたテキストは含まれず、改行は『<br>』タグやブロック要素の境界を反映します。レイアウトの再計算が発生するため、パフォーマンスへの影響があります。
textContent	CSSの表示状態に関係なく、すべてのテキストノードの内容を返します。HTMLソースの構造どおりに空白や改行も含まれます。レイアウトの再計算が発生しないため、処理が高速です。

概要

『HTML要素.innerText』はHTML要素の表示テキストを取得・設定するプロパティです。『HTML要素.textContent』と似ていますが、『HTML要素.innerText』はCSSで非表示にされたHTML要素のテキストを含まず、画面に実際に表示されている内容だけを返すという違いがあります。

『HTML要素.innerText』はレイアウト情報を参照するため、呼び出すたびにブラウザがレイアウトの再計算を行います。ループ内で大量のHTML要素に対して繰り返し呼び出すとパフォーマンスが低下する場合があるため、表示状態を考慮する必要がなければ『HTML要素.textContent』を使用する方が効率的です。

テキストを設定する際は『HTML要素.innerText』も『HTML要素.textContent』も同じように、既存の子要素をすべて置き換えてテキストノードを設定します。HTMLタグは文字列としてそのまま表示されるため、HTMLとして解釈させたい場合は『HTML要素.innerHTML』を使用してください。