这是使用普通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

步骤1。准备要素:

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

步骤2。在后面追加:

elementParent.insertBefore(newElement, element.nextSibling);

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

理想情况下，insertAfter应该类似于insertBefore。下面的代码将执行以下操作:

如果没有子节点，则追加新的Node 如果没有引用节点，则追加新节点 如果引用节点后没有节点，则追加新节点 如果引用节点后面有一个兄弟节点，那么新节点将被插入到那个兄弟节点之前 返回新节点

扩展节点

Node.prototype.insertAfter = function(node, referenceNode) {

    if (node)
        this.insertBefore(node, referenceNode && referenceNode.nextSibling);

    return node;
};

一个常见的例子

node.parentNode.insertAfter(newNode, node);

查看代码的运行情况

// First extend Node.prototype.insertAfter = function(node, referenceNode) { if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; }; var referenceNode, newNode; newNode = document.createElement('li') newNode.innerText = 'First new item'; newNode.style.color = '#FF0000'; document.getElementById('no-children').insertAfter(newNode); newNode = document.createElement('li'); newNode.innerText = 'Second new item'; newNode.style.color = '#FF0000'; document.getElementById('no-reference-node').insertAfter(newNode); referenceNode = document.getElementById('no-sibling-after'); newNode = document.createElement('li'); newNode.innerText = 'Third new item'; newNode.style.color = '#FF0000'; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById('sibling-after'); newNode = document.createElement('li'); newNode.innerText = 'Fourth new item'; newNode.style.color = '#FF0000'; referenceNode.parentNode.insertAfter(newNode, referenceNode); <h5>No children</h5> <ul id="no-children"></ul> <h5>No reference node</h5> <ul id="no-reference-node"> <li>First item</li> </ul> <h5>No sibling after</h5> <ul> <li id="no-sibling-after">First item</li> </ul> <h5>Sibling after</h5> <ul> <li id="sibling-after">First item</li> <li>Third item</li> </ul>

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

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