尽管insertBefore()很好，这里的大多数答案都引用了它。为了增加灵活性，更明确一点，你可以使用:

将insertAdjacentElement()作为refElem。insertAdjacentElement(position, newElem)允许你引用任何元素，并将将要移动的元素插入你想要的位置(position可以是'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

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

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

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

方法节点。After (doc)在另一个节点之后插入一个节点。

对于两个DOM节点node1和node2，

node1.after(node2)在node1之后插入node2。

这个方法在旧的浏览器中是不可用的，所以通常需要填充。

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

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

步骤1。准备要素:

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

步骤2。在后面追加:

elementParent.insertBefore(newElement, element.nextSibling);