Question

当我执行divNode.appendChild(pNode)之类的操作时，pNode会移到divNode内。看起来它的父母从任何地方变为divNode。这是预期的行为吗？

<html>
<head>
<style>
p {
    background: orange;
}
div {
    background: lightcyan;
    padding: 5px;
}
</style>
<script>
window.onload = function() {
    pNode = document.getElementById('pNode');
    divNode = document.getElementById('divNode');
    divNode.appendChild(pNode);
}
</script>
</head>
<body>
<p id="pNode">Foo</p>
<div id="divNode">Bar</div>
</body>
</html>

是否可以对其进行修改，以便pNode保留在正文下以及divNode？如果节点的两个父节点没有意义，那么是否可以创建pNode的新副本并将此新副本附加到divNode？

Answer 1

这是预期的行为。当您在DOM中已有的节点上执行appendChild()时，该节点将从当前在DOM中的位置移动到您指定的新位置。这也将改变它的父节点以及下一节点和前一节点。

一个节点只能有一个直接父节点，所以不可能有两个父节点，因为每个父节点都表示节点的位置，与粒子物理的奥秘不同，节点一次只能有一个节点。如果您希望在两个位置中有两个节点，则可以创建一个新节点并附加该节点，也可以克隆现有节点并附加该节点。

有关如何制作节点副本以及将副本插入第二个位置的信息，请参阅cloneNode() function。

<script>
window.onload = function() {
    pNode = document.getElementById('pNode').cloneNode(true);
    pNode.id = "pNode2";
    divNode = document.getElementById('divNode');
    divNode.appendChild(pNode);
}
</script>

请记住，在克隆节点时，克隆树中具有ID的任何节点都需要一个新ID，以便ID值在文档中保持唯一。

.appendChild（）是否会终止子项与其当前父项之间的父子关系？

1 个答案: