innerTextとは
- innerText とは次の語句からなるjavascriptのプロパティです。
- inner
- 読み: インナー
意味: 内側、内部 - text
- 読み: テキスト
意味: 文字情報
Element.innerTextの概要
innerTextとは、内部の文字情報という意味になります。 つまり、HTML要素の<開始タグ>と<終了タグ>に内包されたテキストことです。
これは要素に内包されたコンテンツそのもののことを表していますが、innerTextプロパティは内包されたテキスト部分のみを参照します。 もしもコンテンツ内に別の要素が内包されていても要素の操作はできないということです。また、このプロパティで要素を内包しようとしても テキストとして処理されます。
このプロパティと類似したプロパティに innerHTML プロパティがありますが、これはテキストだけでなく、HTML要素も認識できるプロパティなので、 このページのサンプルのようにテキスト値だけでなく、HTML要素も含めた値を取得したり、代入したりできます。
サンプルコードと実行結果
このサンプルではボタンをクリックするとoutput要素(idAnswer)のinnerTextプロパティに次のテキストを代入します。
'<span style="color: red;">YWORK</span>'
代入されたテキストにHTMLタグがある場合も、全てテキストとして認識されます。 HTMLタグの部分を認識させたい場合は、 innerHTML を使用してください。
サンプルコード: HTML
<body>
<p><output id="idAnswer">innerText</output></p>
<p><input type="button" value="ボタン" onclick="evtName()"></p>
</body>
- 02: output要素 (id="idAnswer")
- 03: input要素button型 (evtName()関数を呼び出します)
サンプルコード: script
<script>
let elmAnswer = document.getElementById("idAnswer");
function evtName(){
elmAnswer.innerText = '<span style="color: red;">YWORK</span>';
}
</script>
- 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
- 03: evtName()関数を作成 (関数名は任意)
- 04: elmAnswerのinnerTextにテキストを代入 (タグを含むテキスト)
答え: id="idAnswer"
実行:
innerTextを使用する上での要点
- このプロパティに値を代入すると、代入した値はテキストとして処理されます。