你可以在新版本的Chrome, Firefox和Opera中调用after()方法。这种方法的缺点是Internet Explorer还不支持它。

例子:

// You could create a simple node
var node = document.createElement('p')

// And then get the node where you want to append the created node after
var existingNode = document.getElementById('id_of_the_element')

// Finally you can append the created node to the exisitingNode
existingNode.after(node)

一个简单的HTML代码来测试: <！DOCTYPE html > < html > 身体< > < p id =“了”> < / p > < p id = "下来“> < / p > <button id="switchBtn" onclick="switch_place()“>开关的地方> < /按钮 <脚本> 函数switch_place () { var downElement = document.getElementById("down") var upElement = document.getElementById("up") downElement.after (upElement); . getelementbyid(“switchBtn”)。innerHTML = "切换!" ｝ > < /脚本 < /身体> < / html >

正如预期的那样，它在向下的元素之后移动向上的元素

输入随身的“强暴”

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

好处:

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

缺点:

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

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()方法

可以使用appendChild函数在元素之后插入。

参考:http://www.w3schools.com/jsref/met_node_appendchild.asp

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

这里的referenceNode是你想把newNode放在后面的节点。如果referenceNode是它的父元素中的最后一个子元素，那很好，因为referenceNode。nextSibling将为null, insertBefore通过添加到列表末尾来处理这种情况。

So:

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

你可以使用下面的代码段来测试它:

函数插入之后（引用节点， 新节点） { 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”>你好</div>

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

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