nullのプロパティinnerHTMLを読み取れません エラーメッセージ

Cannot read property 'innerHTML' of null -- このエラーは文字通り、nullのinner HTMLを読み取れないことを意味します。

このエラーは、初心者の問題です。実は、ページのHTML構造において、innerHTMLは実際の値を持っており、コンソールで取得することができるのです。

問題：スクリプトの DOM 部分が body タグの前に配置されている。

ブラウザのレンダリング原則によると、HTMLコードは上から下に向かってコードを実行し、ブラウザのJSパーサーがスクリプトを解析してDOM操作を実行するとき、下のDOM構造はまだ構築されていません。そうすると、内部のHTML情報を正しく読み取れないというプロンプトが表示されます。

解決方法 DOMの読み込み部分を含むスクリプトをDOM構造の後ろに置く。 </body> タグを前に置く。または、直前のscriptタグに: window.onload などと書き、DOMツリーが読み込まれた後にスクリプトコードが実行されるようにする。