元素已存在却提示无法追加至未定义节点的问题排查

嘿，我一眼就发现问题出在哪了！你代码里的错误其实是个很容易犯的小语法问题：

你已经通过document.querySelector('#timeline')获取到了目标元素并存入timelineselect变量，但在追加子元素的时候，你错误地写成了document.timelineselect.appendChild(maindiv)——这里document对象根本没有timelineselect这个属性，所以它才是undefined，这就是报错的根源！

正确的写法应该直接使用你已经定义好的变量timelineselect来调用appendChild方法。

修正后的代码片段：

function additionalcss() { 
  var timelineselect = document.querySelector('#timeline'); 
  if (timelineselect != null) { 
    //it passes this so I know its not null 
    console.log(timelineselect); //this prints fine, and is defined 
    const maindiv = document.createElement('div'); 
    maindiv.setAttribute('id', 'div-main'); 
    timelineselect.appendChild(maindiv); // 这里去掉前面的document.就对了
    ReactDOM.render(<Dropdown /> , maindiv); 
  } 
}

另外给你个小建议：以后遇到这类“未定义节点”的错误，可以先把疑似有问题的对象打印出来看看（比如这里可以加个console.log(document.timelineselect)），就能快速定位到是哪部分引用错了~

内容的提问来源于stack exchange，提问作者Soup