AJAX渲染数据库数据时报Uncaught TypeError: myTable is null如何解决

报错原因 #

你遇到的myTable is null错误核心原因是JS代码执行时，id为my-Table的DOM元素还没有被浏览器渲染完成，getElementById找不到对应元素就会返回null。
最常见的触发场景是你把myJs.js的引入标签放在了HTML的<head>区域，或者JS执行逻辑没有绑定DOM加载完成的回调，浏览器加载并执行JS时，<body>里的<div id="my-Table">还没被解析渲染。

解决方法 #

方法1：调整JS引入位置

把你的myJs.js文件的引入标签移动到home.html的</body>闭合标签之前，确保所有DOM元素渲染完成后再加载执行JS：

<!-- home.html 尾部 -->
  <div id="my-Table"></div>
  <!-- 放在这里，body闭合标签前，注意先引入jQuery再引入你的自定义JS -->
  <script src="你的jQuery引入路径"></script>
  <script src="myJs.js"></script>
</body>
</html>

方法2：把逻辑包裹在DOM加载完成的回调中

如果不方便调整JS引入位置，可以把你的AJAX逻辑套入DOM加载完成的监听回调里，确保DOM渲染完成后才执行元素获取逻辑：

// myJs.js 完整代码
// jQuery 写法，依赖jQuery
$(document).ready(function() {
  $.ajax({
    type: 'GET',
    url: 'myUrl/',
    success: function(response){
      console.log('success')
      let elementsOfDataBase = response.table
      const myTable = document.getElementById("my-Table");
      elementsOfDataBase.map(item => {
        const div = document.createElement('div')
        div.innerHTML += item.fields.item
        div.innerHTML += '<br>'
        myTable.appendChild(div);
      })
    },
    error: function (error){
      console.log('error')
    },
  })
})

如果用原生JS不需要依赖jQuery，也可以用DOMContentLoaded事件：

// 原生JS写法
document.addEventListener('DOMContentLoaded', function() {
  // 把你的AJAX逻辑放在这里
})

其他排查方向 #

如果以上方法都无效，可以再检查两个点：

• 页面中是否真的没有重复的my-Tableid，id区分大小写，注意拼写完全一致
• 是否有其他JS代码在你的AJAX执行前，动态删除了my-Table元素

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