javascript - 当我将孩子从一个父母移动/复制到另一个父母时，如何重新计算显示？

Question

我正在尝试将图像从具有几个孩子的父 A 拖放到最初为空的父 B。我可以指定 element.parent = document.getElementById('foo')，但是文档不会像我最初将元素放在 foo 下一样自然流动。

我目前正在通过让 JavaScript 样式来解决这种行为，让父级表现得好像它包含子级，而子级则表现得好像它包含在父级中一样，但我想知道是否有更好的方法来拥有文档更新为看起来好像孩子被放置在目标父母而不是原始父母之下。

Answer 1

您没有正确移动 DOM 中的项目 - 当您正确移动它时，显示将自动更新。

你不能只设置.parent属性。首先，.parent它甚至不是 DOM 元素上的属性（它是.parentNode）。其次，它不是您可以直接设置的属性（根据DOM 规范，它是只读属性）。相反，您需要这样做：

document.getElementById('foo').appendChild(element);

这会将其从当前所在的 DOM 位置中移除，并将其附加为新父节点的最后一个子节点。如果要将其放置为相对于现有子节点的特定子节点（例如，作为第三个子节点或第一个子节点），您可以使用.insertBefore()代替.appendChild().

如果想要将节点复制到新位置而不是移动现有节点，则首先必须制作节点的副本（从头开始制作或使用.cloneNode()然后以相同的方式将副本插入 DOM。