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

referenceNode您要放置的节点在哪里newNode。IfreferenceNode是其父元素中的最后一个子元素，这很好，因为referenceNode.nextSiblingwill 是null并insertBefore通过添加到列表的末尾来处理这种情况。

所以：

function insertAfter(newNode, referenceNode) {
    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>

简单的 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 上运行它

尽管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()

参考：

https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https:// developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText

insertAdjacentHTML + outerHTML

elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)

优点：

• DRYer：您不必将 before 节点存储在变量中并使用它两次。如果您重命名变量，则修改的次数较少。
• 打高尔夫球比insertBefore（即使现有节点变量名称为 3 个字符长，也能实现）

缺点：

• 较新的浏览器支持较低：https : //caniuse.com/#feat=insert-adjacent
• 将丢失元素的属性，例如事件，因为outerHTML将元素转换为字符串。我们需要它是因为insertAdjacentHTML从字符串而不是元素添加内容。

一个快速的谷歌搜索揭示了这个脚本

// create function, it expects 2 values.
function insertAfter(newElement,targetElement) {
    // target is what you want it to go after. Look for this elements parent.
    var parent = targetElement.parentNode;

    // if the parents lastchild is the targetElement...
    if (parent.lastChild == targetElement) {
        // add the newElement after the target element.
        parent.appendChild(newElement);
    } else {
        // else the target has siblings, insert the new element between the target and it's next sibling.
        parent.insertBefore(newElement, targetElement.nextSibling);
    }
}