为什么不能在JavaScript中链式调用createElement()与setAttribute()？

报错原因 #

这个问题的核心是DOM API的返回值设计差异：

• document.createElement('div') 执行后会返回新创建的DOM节点对象，属于标准的Node类型
• 但setAttribute方法的设计是没有返回值的，执行后返回undefined，不会返回调用它的节点对象本身
• 你写的链式调用中，最终赋值给someDiv2的是setAttribute返回的undefined，而不是前面创建的div节点

后续调用appendChild(someDiv2)时，该方法强制要求入参必须是Node类型，传入undefined自然会触发类型不匹配的报错。

如果你想实现等效的链式写法，可以参考如下原生JS实现：

// 写法1：借助立即执行函数返回节点
var someDiv2 = (function() {
  const el = document.createElement('div');
  el.setAttribute('class', 'someClass');
  return el;
})();

// 写法2：用逗号运算符简化
var someDiv2 = (el = document.createElement('div'), el.setAttribute('class', 'someClass'), el);

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