JavaScript xxx.innerHTML is not a functionの解決方法

2023年7月30日

環境
Google Chrome　 114.0.5735.199（Official Build） （64 ビット）
Windows 11 Pro 64bit

修正前コード

<div id="box">  
  <p>123456 abc study</p>
</div>

<button onclick="funA()">変更</button>

<script>
function funA() {
  const gg = document.getElementById('box');
  gg.innerHTML('<p>change 222</p>');
}
</script>

エラーメッセージ
Uncaught TypeError: gg.innerHTML is not a function

原因
Element オブジェクトの innerHTML プロパティは、要素内の HTML または XML の
マークアップを取得したり設定したりします。
innerHTMLは関数として使用することができません。値を設定して使用します。

修正後コード

<div id="box">  
  <p>123456 abc study</p>
</div>

<button onclick="funA()">変更</button>

<script>
function funA() {
  const gg = document.getElementById('box');
  gg.innerHTML= '<p>change text</p>';
}
</script>

結果
「変更」ボタンを押下すると、文字が「change text」に変更されます。