为何链式调用document.createElement添加类名的代码无法生效？

这问题我当初刚学DOM操作的时候也踩过类似的坑，咱们一步步拆解来看：

首先看你能正常工作的代码：

const element = document.createElement('div');
element.classList.add('person');

这里document.createElement('div')会返回一个实实在在的DOM div元素，你把这个元素存在element变量里，之后调用它的classList.add()方法给元素加类名，完全没问题——因为你操作的是那个已经创建好的DOM元素本身。

再看不能生效的链式调用代码：

const element = document.createElement('div').classList.add('person');

问题出在方法的返回值上：

• document.createElement('div')确实返回了DOM元素，这点没错；
• 但紧接着调用的classList.add('person')方法，它的设计是没有返回值的（实际返回undefined）；
• 所以你最后把undefined赋值给了element变量，而不是你创建的那个div元素！

简单说就是链式调用到add()这里就“断链”了，因为它没把DOM元素返回给你，自然没法后续用这个变量做其他操作（比如把元素添加到页面）。

如果非要用类似“链式”的写法，倒是可以换个方式，比如用Object.assign一次性设置属性：

const element = Object.assign(document.createElement('div'), { className: 'person' });

不过说实话，还是分开写的代码更清晰，不容易踩这种返回值的坑~

备注：内容来源于stack exchange，提问作者nasirMasud