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

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,它没有地方可去.