js报错Cannot read properties of null (reading 'appendChild')

Question

问题遇到的现象和发生背景 将dl标签加入chooseArea父标签，加入报错Cannot read properties of null (reading 'appendChild')

问题相关代码，请勿粘贴截图

chooseArea();
function chooseArea(){
// 获取chooseArea容器
var chooseArea = document.querySelector('.wrap .main .mainCon .infoWrap .chooseWrap .choose .chooseArea');

                // 获取数据
                var crumbData = goodData.goodsDetail.crumbData;
                // 遍历数组
                crumbData.forEach(function(item){
                    // 创建dl容器
                    var dlNode = document.createElement('dl');
                    // var dlNode = document.querySelectorAll('.mainCon .chooseWrap .choose .chooseArea dl')[0];
                    // 创建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);
            }

运行结果及报错内容

尚品汇.html:462 Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

我的解答思路和尝试过的方法

1.将js代码放在了body标签外面 没有解决

我想要达到的结果

chooseArea.appendChild(dlNode);实现将dlNode节点放入chooseArea

Answer 1

chooseArea 对象获取到的应该是个数组。chooseArea[0] 应该就可以插入了
但是你这个写法是真的难受（var chooseArea = document.querySelector('.wrap .main .mainCon .infoWrap .chooseWrap .choose .chooseArea');）