大家好，欢迎来到IT知识分享网。

项目场景：

本来写的是一个js渲染，但是出了个小问题，cannot read properties of null(reading appendChild)报错。大致意思是：不能读取空的属性。

let data = [
  {img:"./img/OIP-C.jfif",id:13,name:'黄焖鸡米饭',订餐电话:13782721148,均价:'均价11元'},
  {img:"./img/OIP-C.jfif",id:12,name:'胡辣汤',订餐电话:15188811571,均价:'均价3元'}
]
const tbody = document.getElementById('listContent')
for(var i = 0;i < data.length;i++){
  const tr =  document.createElement('tr')
  //console.log(tr)
  // console.log(tr.nodeType)
  tbody.appendChild (tr)
  for(var k in data[i]){
    var td = document.createElement('td')
    td.innerHTML = data[i][k]
    tr.appendChild(td)

解决方案：

试着加

  console.log(tr)//打印数据内容，如果是null说明数据的获取有问题。打印结果：<tr></tr>

  console.log(tr.nodeType)//判断节点是否有效，节点需有效，若打印1则说明有效。我的是有效的

总之就是一直找不到原因，经历了一上午把appendChild加上，搜索了下，很简单就找到了原因：

<script src="./js/index.js"></script>

这个js引入放body最后面就解决了。页面是自上而下的运行的，HTML都没有运行到，当然获取不到对应节点。

以后js文件尽量都引入到后面，不然真的会导致一些奇奇怪怪的问题来浪费我们的时间。