javascript - 无法在另一个节点之前和之后插入节点

我正在尝试在现有节点之前和之后插入一个节点。
问题是，它只会插入其中之一。奇。谁能解释为什么？

这是代码

// create your new node <p>Hi</p>
 var newNode = document.createElement("p");
 newNode.appendChild(document.createTextNode("Hi"));

// a existing node for reference
var refNode = document.getElementById("xyz");

// insert newNode before refNode
refNode.parentNode.insertBefore(newNode, refNode);

// insert newNode after refNode
refNode.parentNode.insertBefore(newNode, refNode.nextSibling);

PS感谢karim79回答了我的previous question on insert after。

最佳答案

将节点添加到文档时，必须将其从以前的任何位置删除。同一节点不能位于两个位置。

您想要的是第二个位置的节点的副本：

// create your new node <p>Hi</p>
var newNode = document.createElement("p");
newNode.innerHTML = "Hi";

// a existing node for reference
var refNode = document.getElementById("xyz");

// insert newNode before refNode
refNode.parentNode.insertBefore(newNode, refNode);

// insert newNode after refNode
refNode.parentNode.insertBefore(newNode.cloneNode(true), refNode.nextSibling);