尝试在元素之前插入元素的结果

Result of Trying to Insert an Element Before Itself

本文关键字：元素 插入 结果      更新时间：2023-09-26

当我有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发生了什么？

根据W3C DOM 3规范：

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

当插入一个节点时，如果它已经在DOM中，它将首先被移除。因此，您尝试将它插入到不再在DOM中的节点（本身）之前。您应该测试这两个节点是否相同，如果相同，则不要执行插入操作。

编辑

一个简单的js函数是：

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

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

  1. CCD_ 2首先从DOM中移除，以便可以将其插入其他位置
  2. 现在我们尝试在#second之前插入它，但是，由于#second不再在DOM中，所以它没有位置可去
相关文章：