JavaScript 的 element.appendChild() 方法表现得很奇怪

Question

我想做的是..在3个元素中附加一个共同的node/element..

const elements = document.getElementsByClassName(“test”);
const newElement = document.createElement(“BUTTON”);
newElement.classList.add(“dummy”);

Array.from(elements).forEach(item => {
item.appendChild(newElement);
});

预期的行为是所有 .test 元素都应包含 .dummy 按钮..

但实际上只有最后一个 .test 元素获得 .dummy 按钮..

但是如果我像这样将那个按钮放在循环中：

const elements = document.getElementsByClassName(“test”);

Array.from(elements).forEach(item => {
const newElement = document.createElement(“BUTTON”);
newElement.classList.add(“dummy”);
item.appendChild(newElement);
});

然后所有 .test 元素都会得到那个 .dummy 按钮..!!

任何人都可以解释有关此 JS 行为的任何特定原因吗？我已经尝试 google 但没有找到任何好的解释。

Answer 1

那是因为一个child dom只能有一个parent因为dom是一个树结构，child节点不能继承多个parents。在您的情况下，您正在尝试将多个 parent 分配给 child 节点 newElement.

每次在数组中创建一个新的child并且它只有一个parent

Answer 2

感谢@VLAZ 将其作为答案发布：

如果给定的子节点是对文档中现有节点的引用，appendChild() 会将其从当前位置移动到新位置“来自 MDN。它甚至在下一段中重复了同样的事情：”这意味着一个节点不能同时位于文档的两个点中。所以如果该节点已经有一个父节点，则该节点首先被删除，然后附加到新位置

JavaScript 的 element.appendChild() 方法表现得很奇怪

JavaScript’s element.appendChild() method behaving weird

javascript

appendchild