HTMLElement.innerText

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

構文

const renderedText = htmlElement.innerText
htmlElement.innerText = string

値

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

例

この例では innerText と Node.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;

結果

仕様書

ブラウザーの互換性

関連情報

• HTMLElement.outerText
• Element.innerHTML