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

Question

我想做的是..在3个元素中附加一个公共(public)节点/元素..

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 行为的任何具体原因吗？我尝试用谷歌搜索，但没有找到任何好的解释。

Answer 1

这是因为子 dom 只能有一个父节点，因为 dom 是一种树结构，子节点不能继承多个父节点。在您的情况下，您尝试将多个父节点分配给子节点newElement。

每次创建新子项时都会在数组内，并且它只有一个父项