试图在自己之前插入元素的结果

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 spec：

  

注意：在自身之前插入节点取决于实现。

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

修改

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

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

Answer 2

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

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