referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);

其中 referenceNode 是要将 newNode 放在后面的节点。如果 referenceNode 是其父元素中的最后一个子元素，则没问题，因为 referenceNode.nextSibling 将为 null ，并且 insertBefore 会通过将其添加到列表末尾来处理这种情况。

因此：

function insertAfter(referenceNode, newNode) {
    referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

您可以使用以下代码片段对其进行测试：

function insertAfter(referenceNode, newNode) {
  referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
}

var el = document.createElement("span");
el.innerHTML = "test";
var div = document.getElementById("foo");
insertAfter(div, el);

<div id="foo">Hello</div>

insertBefore() 非常棒，这里大多数答案都引用了它。为了增加灵活性，并且更明确一点，您可以像这样使用 insertAdjacentElement() ：

refElem.insertAdjacentElement(position, newElem)

它允许您引用任何元素，并将要移动的元素插入到您想要的准确位置。位置可以是以下之一： 'beforebegin' 、 'afterbegin' 、 'beforeend' 、 'afterend' ），如下所示：

// refElem.insertAdjacentElement('beforebegin', myElem); 
<p id="refElem">
    // refElem.insertAdjacentElement('afterbegin', myElem);
    ... content ...
    // refElem.insertAdjacentElement('beforeend', myElem);
</p>
// refElem.insertAdjacentElement('afterend', myElem); 

对于类似用例，需要考虑的其他选项是 insertAdjacentHTML() 和 insertAdjacentText()

参考：

• MDN：Element.insertAdjacentElement()
• MDN： Element.insertAdjacentHTML()
• MDN：Element.insertAdjacentText()

简单的 JavaScript 如下所示：

追加之前：

element.parentNode.insertBefore(newElement, element);

追加之后：

element.parentNode.insertBefore(newElement, element.nextSibling);

但为了便于使用，请添加一些 原型 ：

通过构建以下原型，您将能够直接从新创建的元素调用这些函数。

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore(element) 原型

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(element)原型

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

代码片段可查看其全部运行情况：

/* Adds Element BEFORE NeighborElement */
Element.prototype.appendBefore = function(element) {
  element.parentNode.insertBefore(this, element);
}, false;

/* Adds Element AFTER NeighborElement */
Element.prototype.appendAfter = function(element) {
  element.parentNode.insertBefore(this, element.nextSibling);
}, false;


/* Typical Creation and Setup A New Orphaned Element Object */
var NewElement = document.createElement('div');
NewElement.innerHTML = 'New Element';
NewElement.id = 'NewElement';


/* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */
NewElement.appendAfter(document.getElementById('Neighbor2'));

div {
  text-align: center;
}
#Neighborhood {
  color: brown;
}
#NewElement {
  color: green;
}

<div id="Neighborhood">
  <div id="Neighbor1">Neighbor 1</div>
  <div id="Neighbor2">Neighbor 2</div>
  <div id="Neighbor3">Neighbor 3</div>
</div>

在 JSFiddle 上运行