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

Question

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

我目前正在解决此问题，方法是让 JavaScript 样式的父级表现得好像它包含子级，而子级则表现得好像它包含在父级中一样，但我想知道是否有更好的方法更新文档，使其看起来好像子级放置在目标父级而不是原始父级下。

Answer 1

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

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

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

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

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