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

Question

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

这是代码

// 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回答了之前关于插入的问题.

Answer 1

将节点添加到文档时,必须从之前的任何位置删除该节点.同一节点不能位于两个位置.

你想要的是第二个位置的节点副本:

// 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);