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

Note: Inserting a node before itself is implementation dependent.

插入节点时，如果它已经在 DOM 中，则首先将其删除。所以你然后试图将它插入一个不再在 DOM 中的节点(本身)之前。您应该测试两个节点是否相同，如果相同，则不要插入。

编辑

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

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