cannot read properties of null(reading appendChild)解决办法

项目场景:

本来写的是一个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说明数据的获取有问题。打印结果:

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

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


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

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

你可能感兴趣的:(前端,html,vue.js,javascript,前端)