javascript - 尝试在自身之前插入元素的结果

Question

当我有 HTML 时：

<div>
    <p id="first">First paragraph!</p>
    <p id="second">Second paragraph!</p>
</div>

我运行脚本：

var second = $('#second');
$('#second').insertBefore(second);

结果是：

<div>
    <p id="first">First paragraph!</p>
</div>

我知道代码是荒谬的，但我正在编写代码，其中我插入的项目可能等于我之前插入的项目。

有人可以帮我理解为什么我得到上述结果吗？怎么了#second？

Answer 1

根据W3C DOM 3 规范：

注意：在自身之前插入一个节点是依赖于实现的。

插入节点时，如果它已经在 DOM 中，则首先将其删除。因此，您尝试将其插入到不再位于 DOM 中的节点（本身）之前。您应该测试两个节点是否相同，如果它们相同，则不要进行插入。

编辑

执行上述操作的普通 js 函数是：

function doInsert(insertNode, beforeNode) {
  if (insertNode != beforeNode) {
    beforeNode.parentNode.insertBefore(insertNode, beforeNode);
  }
}

Answer 2

虽然规范不清楚应该发生什么，但我的猜测是：

1. #second首先从 DOM 中删除，以便可以将其插入其他地方。
2. 现在我们尝试在之前插入它#second，但是，由于#second它不再在 DOM 中，所以它无处可去。