为什么DOM操作中链式调用createElement和className会导致appendChild报错

问题原因 #

这是JS中赋值表达式的返回值规则导致的：赋值运算符=的运算顺序是从右到左，且整个赋值表达式的返回值为等号右侧的值。

你写的链式赋值代码实际执行逻辑如下：

let newDiv = document.createElement('div').className = 'purple'

1. 首先创建div DOM节点，紧接着给这个节点的className赋值为'purple'，这个赋值操作的返回值是字符串'purple'
2. 再将返回的字符串'purple'赋值给newDiv变量
   最终你传给appendChild的参数是字符串，不是DOM节点，所以触发「参数不是Node类型」的报错。

拆分写法的逻辑是先把新建的DOM节点引用保存到newDiv变量，再单独给节点设置类名，全程newDiv存储的都是合法的DOM节点，所以可以正常传给appendChild使用。

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