ywork2020.com

Title

HTML要素の内包コンテンツを操作する

目次 (INDEX)

innerHTMLとは

innerHTML とは次の語句からなるjavascriptのプロパティです。
inner
読み: インナー
意味: 内側、内部
html
読み: HTML
意味: ハイパーテキストマークアップランゲージ

目次に戻る

Element.innerHTMLの概要

innerHTMLとは、内部のハイパーテキストという意味になります。 つまり、HTML要素の<開始タグ>と<終了タグ>に内包されたHTMLタグを含むコンテンツのことです。

これは要素に内包されたコンテンツそのもののことを表しています。 つまり、innerHTMLプロパティは内包された子要素とテキスト部分の全てものを指します。

このプロパティと類似したプロパティに innerText プロパティがありますが、これはテキストのみを認識できるプロパティなので、 このページのサンプルのようにHTMLタグをテキストのなかに含めて代入しても全てテキスト扱いとなります。

目次に戻る

サンプルコードと実行結果

このサンプルではボタンをクリックするとoutput要素(idAnswer)のinnerHTMLプロパティに次のテキストを代入します。

'<span style="color: red;">YWORK</span>'

代入されたテキストにHTMLタグがある場合は、その部分は要素として認識されます。 全てをテキストとして代入したい場合は、 innerText を使用してください。

サンプルコード: HTML
<body>
		<p><output id="idAnswer">innerHTML</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.innerHTML = '<span style="color: red;">YWORK</span>';
		}
	</script>
	
  • 02: elmAnswerという要素参照の変数を宣言 (idAnswerを参照)
  • 03: evtName()関数を作成 (関数名は任意)
  • 04: elmAnswerのinnerHTMLにテキストを代入 (タグを含むテキスト)
実行結果: 実行のボタンをクリックするとidAnswerのinnerHTMLにテキストが代入されます。

答え: id="idAnswer"
innerHTML

実行:

目次に戻る

innerHTMLを使用する上での要点

  1. このプロパティに値を代入すると、代入した値はHTMLタグとテキストを別々に認識して処理されます。

目次に戻る