コンソールでnull is not an object (evaluating ‘ .insertBefore’) が出た時の対処法

こんにちわネイビーモバイルのスタッフです。

昼はじわじわ暑いですが、夜はまだまだ寒いですね。

UNIQLOのTシャツの任天堂コラボのお陰でTシャツが増えました。

 

さてさて

普段jQueryを使っているのですが、

java sprictで書いていたときに、まんまとドツボにはまってしまいました。

スペルも何も間違えがないのに

ある書き方をしてしまうと
まったくjavasprictが反映しないという現象です。

<実行されない例>

<body>

 <script>

  var aaa = document.getElementById('aaa');
  aaa.innerHTML = '<h2>こんにちは</h2>';
  aaa.style.backgroundColor = '#000000';
  aaa.style.fontSize = '24px';
  aaa.style.color = '#ffffff';

  var first = document.createElement('div');
  first.setAttribute('id', 'first');
  first.innerHTML = '<p>こんばんわ</p>';
  aaa.insertBefore(first, null);
 </script>

 

 <div id="aaa">おはよう</div>

</body>

 

ぴ・・・ぴくりとも反応しない。

コンソールで確認すると

null is not an object (evaluating ‘ .insertBefore’)

・・・

.insertBeforeが取得できていないとエラーがでました。

ちゃんと指定しているのになんで・・・?

 

かれこれ一時間くらい悩んでしまいました。
なんとも単純なミスでコトは解決いたしました。

 

!わかったこと
JavaSprictは<html>の下に<script></script>置かないと実行されない。

<実行される例>

<body>

 <div id="aaa">おはよう</div>

 <script>

  var aaa = document.getElementById('aaa');
  aaa.innerHTML = '<h1>こんにちは</h1>';
  aaa.style.backgroundColor = '#000000';
  aaa.style.fontSize = '30px';
  aaa.style.color = '#ffffff';

  var first = document.createElement('div');
  first.setAttribute('id', 'aaa');
  first.innerHTML = '<p>こんばんわ</p>';
  aaa.insertBefore(aaa, null);
 
 </script>

</body>

なんともお恥ずかしいミスですね。

対処法は<sprict>とhtmlを逆にしただけです。

javaSprictはhtmlを読み込んでからでないと実行されないんですね。
これがjQueryであれば $function(){} のおかげで先に読み込んでも実行されるんですね。

一字一句スペルまで確認したのに間違えは<sprict></sprict>とhtmlを書く位置だったんですね。
この小一時間もんもんとした時間は無駄でなかったでしょう。もうこれから絶対ミスしないですもんね。