HTMLElement: innerText プロパティ
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since 2016年3月.
innerText は HTMLElement のプロパティで、ノードとその子孫の「レンダリングされている」テキスト内容を示します。
ゲッターとしては、カーソルで要素の内容を選択しクリップボードにコピーした際のテキストに近いものを取得することができます。 セッターとしては、この要素の子要素を指定された値で置き換え、すべての改行を <br> 要素に変換します。
メモ: innerText は Node.textContent と混同しやすいのですが、両者には重要な違いがあります。基本的に innerText はテキストがレンダリングされる外見を意識しますが、 textContent はそうではありません。
値
文字列で、要素の表示されたテキストの内容を表します。
要素自身が表示されないとき（例えば、文書から切り離されたり、表示から隠されたりしている場合）、返値は Node.textContent プロパティと同じ値になります。
警告: innerText をノードに設定すると、そのノードの すべての 子ノードが取り除かれ、指定した文字列値のテキストノード 1 つに置き換えられます。
例
この例では innerText と Node.textContent を比較しています。 innerText が <br> 要素のようなものをどのように意識するかや、非表示の要素を無視することに注意してください。
HTML
html
<h3>元の要素:</h3> <p id="source"> <style> #source { color: red; } #text { text-transform: uppercase; } </style> <span id="text"> このテキストが<br /> どう扱われるか<br /> 下で見てみてください。 </span> <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
js
const source = document.getElementById("source"); const textContentOutput = document.getElementById("textContentOutput"); const innerTextOutput = document.getElementById("innerTextOutput"); textContentOutput.value = source.textContent; innerTextOutput.value = source.innerText; 結果
仕様書
| Specification |
|---|
| HTML # the-innertext-idl-attribute |