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

Question

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

当我做类似的事情时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>

Run Code Online (Sandbox Code Playgroud)

是否有可能修改它以便pNode保留在身体下面以及divNode？如果节点的两个父节点没有意义,那么是否可以创建新副本pNode并将此新副本附加到divNode？

Answer 1

jfr*_*d00 5

这是预期的行为.当您appendChild()对已经在DOM中的节点执行操作时,该节点将从当前在DOM中的位置移动到您指定的新位置.这也会改变它的父节点以及下一节点和前一节点.

一个节点只能有一个直接父,所以它不可能有两个父母,因为每个家长表示为节点的位置,而且与粒子物理学的奥秘,一个节点只能在一个时间一个地方.如果您希望在两个位置中有两个节点,则可以创建一个新节点并附加该节点,也可以克隆现有节点并附加该节点.

有关如何制作节点副本以及将副本插入第二个位置的信息,请参阅该cloneNode()函数.

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

Run Code Online (Sandbox Code Playgroud)

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

归档时间：	14 年，1 月前
查看次数：	844 次
最近记录：	14 年，1 月前