HTMLElement.innerText

innerTextHTMLElement のプロパティで、ノードとその子孫の「レンダリングされた」テキスト内容を示します。ゲッターとして、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。

メモ: innerTextNode.textContent と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText はテキストがレンダリングされる表示を意識しますが、 textContent はそうではありません。

構文

const renderedText = htmlElement.innerText
htmlElement.innerText = string

DOMString で、要素の表示されたテキストの内容を表します。要素自身が表示されないとき (例えば、文書から切り離されたり、表示から隠されたりしている場合)、返値は Node.textContent プロパティと同じ値になります。

この例では innerTextNode.textContent を比較しています。 innerText<br> 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。

HTML

<h3>元の要素:</h3>
<p id="source">
  <style>#source { color: red; }</style>
このテキストが<br>どのように扱われるか<br>
       下で見てみてください。
  <span style="display:none">隠しテキスト</span>
</p>
<h3>textContent の結果:</h3>
<textarea id="textContentOutput" rows="6" cols="30" readonly>...</textarea>
<h3>innerText の結果:</h3>
<textarea id="innerTextOutput" rows="6" cols="30" readonly>...</textarea>

JavaScript

const source = document.getElementById('source');
const textContentOutput = document.getElementById('textContentOutput');
const innerTextOutput = document.getElementById('innerTextOutput');

textContentOutput.innerHTML = source.textContent;
innerTextOutput.innerHTML = source.innerText;

結果

仕様書

仕様書 状態 備考
HTML Living Standard
innerText の定義
現行の標準 導入。 innerText の仕様書の草稿に基づく。履歴は whatwg/html#465 および whatwg/compat#5 を参照。

ブラウザーの互換性

Update compatibility data on GitHub
デスクトップモバイル
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewAndroid 版 ChromeAndroid 版 FirefoxAndroid 版 OperaiOSのSafariSamsung Internet
innerTextChrome 完全対応 1Edge 完全対応 12Firefox 完全対応 45IE 完全対応 5.5Opera 完全対応 9.6Safari 完全対応 3WebView Android 完全対応 4.4Chrome Android 完全対応 18Firefox Android 完全対応 45Opera Android 完全対応 10.1Safari iOS 完全対応 4Samsung Internet Android 完全対応 1.0

凡例

完全対応  
完全対応

関連情報