innerHTML に代入した値が画面に反映されない - JavaScript

JavaScriptでinnerHTML に代入したい値が画面に反映されない現象について紹介します。

現象

innerHTMLに値を代入したにもかかわらず画面に反映されません。

原因

innerHTMLの大文字、小文字のスペルが間違っている可能性があります。

正しい表記

動作しない表記

補足

innerText のスペルはTのみ大文字のため、同様のスペルと勘違いして innerHtml と記述してしまうと動作しません。

コード例

下記のコードは動作し、画面に「JavaScriptが実行されました。」の文字列が表示されます。

<script type="text/javascript">
  function exec() {
   target = document.getElementById("output2");
   target.innerHTML = "JavaScriptが実行されました。";
  }
</script>

下記のコードの場合は、画面に表示されません。また、JavaScriptのエラーにもなりません。

<script type="text/javascript">
  function exec() {
   target = document.getElementById("output2");
   target.innerHtml = "JavaScriptが実行されました。";
  }
</script>