起因
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后面可以试试;

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐