JavaScript链接多个createElement错误

Question

通常，我这样编写代码：

var a = document.createElement('div');
var b = document.createElement('div');
a.appendChild(b);

这有效。现在，我试图使其更紧凑：

var a,b;
a = b = document.createElement('div');
a.appendChild(b);

但是，这样，JS会引发错误：

Failed to execute 'appendChild' on 'Node': The new child element contains the parent.

这是怎么回事？

Answer 1

您认为：

  a = b = document.createElement('div');

与以下相同：

 a = document.createElement('div');
 b = document.createElement('div');

不是。它与以下内容完全相同：

 b = document.createElement('div');
 a = b;

因此，a和b实际上是同一件事。要复制而不是引用（如果您确实需要一个内衬）：

  a = (b = document.createElement('div')).cloneNode(false);

或多个的单件套：

  const [a, b, c, d] = Array.from({ length: 4 }, () => document.createElement("div"));