你可以在新版本的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 >

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

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>

我使用以下命令在选择的末尾插入选项。通过传递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);

快速搜索谷歌会显示这个脚本

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

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

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

步骤1。准备要素:

var element = document.getElementById('ElementToAppendAfter');
var newElement = document.createElement('div');
var elementParent = element.parentNode;

步骤2。在后面追加:

elementParent.insertBefore(newElement, element.nextSibling);