onclick 移除和重新插入 DOM 元素答案

【问题标题】：Removing and reinserting a DOM element onclickonclick 移除和重新插入 DOM 元素
【发布时间】：2011-05-27 02:39:55
【问题描述】：

我最近编写了一个脚本，其中我需要一个元素在被点击时移动到顶部。我在 onclick 函数中使用并且多年来一直在使用以下代码：

this.parentNode.appendChild(this.parentNode.removeChild(this));

脚本不工作，所以我弄乱了代码，尝试了以前从未做过的事情来修复它。我认为问题可能出在这行代码中。实际上，它与它无关，但在我修修补补时，我注意到下面的代码似乎执行了相同的功能。

this.parentNode.appendChild(this);

据我所知，没有区别。前者对我来说感觉“更好”，但我不能说为什么。有实际区别吗？如果没有，我将开始使用后者并保存十八个字符:-)

【问题讨论】：

【解决方案1】：

this 不是this 的子级。
您需要从父节点中删除子节点。

但是，appendChild 将 implicitly remove the node from any existing parent（元素不能有多个父级）：

如果节点已经存在，则将其从当前父节点中删除，然后添加到新的父节点中。

【讨论】：