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"));