或者你可以简单地这样做:

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

insertBefore()方法的使用与parentNode.insertBefore()类似。 因此，为了模仿这一点并创建一个方法parentNode.insertAfter()，我们可以编写以下代码。

JavaScript

Node.prototype.insertAfter = function(newNode, referenceNode) {
    return referenceNode.parentNode.insertBefore(
        newNode, referenceNode.nextSibling); // based on karim79's solution
};

// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;

// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);

// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);

HTML

<div id="divOne">
    <p id="pOne">paragraph one</p>
    <p id="pTwo">paragraph two</p>
</div>

注意，如本文所述，扩展DOM可能不是适合您的解决方案。

然而，这篇文章写于2010年，现在的情况可能有所不同。所以你自己决定吧。

多面体JavaScript()方法

insertAfter的健壮实现。

// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js
Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) {
  function isNode(node) {
    return node instanceof Node;
  }

  if(arguments.length < 2){
    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present."));
  }

  if(isNode(newNode)){
    if(referenceNode === null || referenceNode === undefined){
      return this.insertBefore(newNode, referenceNode);
    }

    if(isNode(referenceNode)){
      return this.insertBefore(newNode, referenceNode.nextSibling);
    }

    throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'."));
  }

  throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));
};

这是使用普通javascript在另一个元素之后添加一个元素的最简单方法

var d1 = document.getElementById('one');
d1.insertAdjacentHTML('afterend', '<div id="two">two</div>');

参考: https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

输入随身的“强暴”

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

好处:

烘干机:你不需要将before节点存储在变量中并使用它两次。如果重命名变量，就少发生修改。 golfs比insertBefore更好(如果现有的节点变量名是3个字符长，则打破平衡)

缺点:

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

我使用以下命令在选择的末尾插入选项。通过传递null作为第二个参数。我不确定这是否是一个异常的“选择”元素，因为我从来没有尝试过其他任何东西，但如果有人来这里寻找这个可能会有所帮助。在IE上也能工作(令人惊讶)。：）

            var x = document.getElementById("SELECT_LIST");
            var boption = document.createElement("option");
            boption.text = "SOME TEXT";
            boption.value = "SOME VALUE";
            x.insertBefore(boption, null);