HTML DOM Element innerText 属性

定義と使用方法

innerText 属性を設定または返すことで、要素のテキスト内容を取得します。

注釈：設定 innerText 属性を設定すると、すべての子ノードが削除され、新しいテキストノードで置き換わります。

別の参照も見てください：

textContent 属性

innerHTML属性

例

要素の内部テキストを取得します：

let text = element.innerText;

自分で試してみてください

文法

要素やノードのテキスト内容を返します：

element.innerText

または

node.innerText

要素やノードのテキスト内容を設定します：

element.innerText = text

または

node.innerText = text

属性値

値 説明
text 要素のテキスト内容

返り値

タイプ 説明
文字列 要素とすべての後裔のテキスト内容、<script>と<style>要素を除きます。

innerHTML、innerText、textContentの違い

innerText属性は次のように返します：

要素とすべての子要素のテキスト内容のみを返します。CSSで隠されたテキストの間隔とタグは含まれませんが、<script>と<style>要素を除きます。

innerHTML属性は次のように返します：

要素のテキスト内容、すべての空白と内部のHTMLタグが含まれています。

textContent属性は次のように返します：

要素とすべての後裔のテキスト内容、空白とCSSで隠されたテキストが含まれていますが、タグは含まれません。

HTMLの例

<p id="myP">   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。</p>

JavaScript 実例

let text = document.getElementById("myP").innerText;
let text = document.getElementById("myP").innerHTML;
let text = document.getElementById("demo").textContent;

自分で試してみてください

上記の例では：

innerText属性は次のように返します：

この要素には余分なスペースがあり、span要素を含んでいます。

innerHTML属性は次のように返します：

   この要素には余分なスペースがあり、<span>span要素</span>を含んでいます。

textContent属性は次のように返します：

   この要素には余分なスペースがあり、span要素を含んでいます。

ブラウザのサポート

すべてのブラウザがサポートしています element.innerText：

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
サポート 10-11 サポート サポート サポート サポート