js报错cannot read properties of null(reading appendChild)解决办法
起因js渲染,香江一个新创建的节点加入css的节点中,成为它的子节点chooseArea();function chooseArea(){// 获取chooseArea容器var chooseArea = document.querySelector('.mainCon .chooseWrap .choose .chooseArea ');// console.log(chooseArea);//
·
起因
js渲染,香江一个新创建的节点加入css的节点中,成为它的子节点
chooseArea();
function chooseArea(){
// 获取chooseArea容器
var chooseArea = document.querySelector('.mainCon .chooseWrap .choose .chooseArea ');
// console.log(chooseArea);
// 获取数据
var crumbData = goodData.goodsDetail.crumbData;
// 遍历数组
crumbData.forEach(function(item){
// 创建dl容器
var dlNode = document.createElement('dl');
// 创建dt
var dtNode = document.createElement('dt');
// 将每一个对象中的title的属性,作为dt的文本
dtNode.innerHTML = item.title;
dlNode.appendChild(dtNode);
// 遍历每个对象的data,这里的item对应每一个对象的选项的文本
item.data.forEach(function(item){
// 创建dd
var ddNode = document.createElement('dd');
ddNode.innerHTML = item;
dlNode.appendChild(ddNode);
// console.log(ddNode);
});
chooseArea.appendChild(dlNode);
// console.log(dlNode);
})
// console.log(chooseArea);
}
报错
cannot read properties of null(reading appendChild)
大致意思是不能取空的属性
解决过程
console.log(chooseArea);//打印这个父节点里面的内容,看是否能获取到东西,如果是null则说明你获取chooseArea这个节点的路径有问题,建议重新获取
我的就是获取路径有问题,所以出了问题;
其他办法
我在网上也找了其他解决办法,不过没有解决我的问题,如果上述解决办法没有帮助到你,可以试试下面的办法:
数据没有加载完成就进行渲染,建议将js代码放在body后面可以试试;
更多推荐
已为社区贡献7条内容
所有评论(0)