将JavaScript数组填充至HTML表格时出现'Uncaught TypeError'错误的原因排查

这个错误其实很常见——它说明你的JavaScript代码在执行的时候，页面上的<table id="myTable">还没被浏览器渲染出来，所以document.getElementById("myTable")返回了null，自然就没法调用insertRow方法了。

下面给你几个简单的解决方案，任选其一就行：

• 把JS代码移到HTML表格之后
  最直接的办法就是把你的JS代码放在表格的下方，比如整个HTML的</body>标签之前。这样当浏览器执行JS的时候，已经把表格元素加载到DOM里了，就能正确获取到它。
  顺便提一句，你的caption标签写法有点问题，应该先闭合<b>再闭合<caption>，修正后的完整代码示例：

  <table id="myTable">
      <caption id=a><b>Automobiliai</b></caption>
      <tr>
          <th>Modelis</th>
          <th>Gamintojas</th>
          <th>Metai</th>
          <th>Variklio Numeris</th>
      </tr>
  </table>
  
  <script>
  var array = [ ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ]
  console.log(array)
  table = document.getElementById("myTable");
  for (var i = 0; i < array.length; i++) { 
      var newRow = table.insertRow(table.length);
      for (var j = 0; j < array[i].length; j++) { 
          var cell = newRow.insertCell(j);
          cell.innerHTML = array[i][j];
      }
  }
  </script>
  

• 用DOMContentLoaded事件包裹代码
  如果不想移动代码位置，可以把所有操作DOM的代码放在DOMContentLoaded事件监听里，这个事件会在页面所有DOM元素加载完成后才触发：

  document.addEventListener('DOMContentLoaded', function() {
      var array = [ ["A4", "Audi", "2015", "1234"], ["A3", "Audi", "2011", "1542"], ["335i", "BMW", "2012", "9874"], ["440d", "BMW", "2015", "1975"], ["Civic", "Honda", "2002", "6574"], ]
      console.log(array)
      table = document.getElementById("myTable");
      for (var i = 0; i < array.length; i++) { 
          var newRow = table.insertRow(table.length);
          for (var j = 0; j < array[i].length; j++) { 
              var cell = newRow.insertCell(j);
              cell.innerHTML = array[i][j];
          }
      }
  });
  

• 给script标签加defer属性
  如果你是用外部JS文件，或者不想改代码位置，也可以给script标签加上defer属性，浏览器会在解析完整个HTML文档后再执行这段JS：

  <script defer>
      // 你的JavaScript代码
  </script>
  

不管选哪种方法，核心都是确保JS代码在表格元素已经存在于DOM中的时候再执行，这样就不会出现找不到元素的错误了。

内容的提问来源于stack exchange，提问作者Dimensijus