JS调用appendChild追加div时报参数非Node类型TypeError如何解决

我尝试使用JavaScript将一个div元素追加到另一个div元素中，但抛出了错误：

JS代码 #

let SynthVoice = class {
  constructor(name){
    this.synthPanel = document.createElement("div");
    this.synthContainer = document.getElementById("synthChannels"); // div element
    this.synthPanel.id = name; // "synth0"
    this.synthContainer.appendChild(this.synthPanel);
  }
}

HTML代码 #

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="/synth/overhaul.js"></script>
    <link rel="stylesheet" href="/synth/styles.css" />
  </head>
  <body>
    <button id="createSynth" onclick="synth0 = new SynthVoice('synth0')">Create Synth 0</button>
    <div id="synthChannels"></div>
  </body>
</html>

CSS代码 #

#synthChannels {
  display: flex;
}

错误提示 #

TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

补充说明 #

上述所有代码都写在SynthVoice类的构造函数中，点击按钮时会创建该类的新实例。现有公开文档说明这段代码可以正常运行，但实际运行却报错，请求帮助排查问题。

核心错误逻辑 #

该报错的直接原因是appendChild方法接收的参数不是合法的DOM Node类型对象，结合你给出的代码，有两类常见触发场景：

1. 代码执行顺序异常导致元素获取失败
   你把js脚本放在了head标签中，如果你在全局作用域下有直接实例化SynthVoice的代码（而非仅通过点击按钮触发），脚本执行时body内的synthChannels节点还未渲染，document.getElementById("synthChannels")会返回null。如果你的代码中不小心写反了appendChild的调用主体和参数，变成this.synthPanel.appendChild(this.synthContainer)，此时作为参数的this.synthContainer是null，就会触发你遇到的报错。
2. 节点对象被篡改
   如果document.createElement方法被其他代码重写，或者this.synthPanel在创建后、执行appendChild前被其他逻辑覆盖为非Node类型的值，也会触发该报错。

验证与修复步骤 #

• 先在构造函数中加入调试打印，确认两个变量的类型：

let SynthVoice = class {
  constructor(name){
    this.synthPanel = document.createElement("div");
    this.synthContainer = document.getElementById("synthChannels");
    // 正常情况下两个打印都应该返回true
    console.log('synthPanel是否为Node：', this.synthPanel instanceof Node);
    console.log('synthContainer是否为Node：', this.synthContainer instanceof Node);
    this.synthPanel.id = name;
    this.synthContainer.appendChild(this.synthPanel);
  }
}

• 如果打印synthContainer不是Node类型，说明元素获取失败，你可以给script标签添加defer属性，保证DOM完全加载后再执行脚本：

<script src="/synth/overhaul.js" defer></script>

也可以直接把script标签移到</body>闭合标签之前。

• 如果打印synthPanel不是Node类型，直接排查其他代码是否篡改了document.createElement方法，或者是否有逻辑重写了this.synthPanel的值。

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