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

对于两个DOM节点node1和node2，

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

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

2022解决方案-元素

编辑:从2021年起，ChildNode已被合并到Element中。我把这个答案改成这样。

新文档:https://developer.mozilla.org/en-US/docs/Web/API/Element

这与ChildNode完全相同。“before”，“after”和“remove”属性现在只是普通元素api的一部分。

// Parent 
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Insert Before Element
el.before(newEl);

// Insert After Element
// Technically this would be invalid because 
// I already inserted newEl before el.
// newEl changed location and is no longer a floating element.
// You cant insert one element in two places at once.
el.after(newEl);

// Another extra feature originally added with ChildNode is the .remove() method,
// which deletes the element from the DOM
el.remove();
newEl.remove();

2019年解决方案(过时)

我不推荐使用这个解决方案，但为了“历史”起见，我会把它保留在这里。

这比使用polyfill类型的原型重写更安全，它只是一个基本的功能。当然它不是很漂亮，但它是有效的。

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Function You Need
function insertAfter(el0, el1) {
    el0.parentNode.insertBefore(el1, el0.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl);

// Insert After Element
insertAfter(el, newEl);

// Just remember you cant use insertAfter() or .insertBefore()
// on newEl more than once.
// You cant insert one element in two places at once.

原始解决方案(不良做法)

我不建议使用这个解决方案，这是我最初在发布这个答案时使用的解决方案。为了“历史”，我把它留在这里

这只是一个不存在的. insertafter函数的填充。这个原型直接添加了函数HTMLElement.insertAfter(element);到HTMLElement原型:

// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");

// Custom Method
Element.prototype.insertAfter = function(new) {
    this.parentNode.insertBefore(new, this.nextSibling);
}

// Insert Before Element
el.insertBefore(newEl)

// Insert After Element
el.insertAfter(newEl);

// Just remember you cant use .insertAfter() or .insertBefore() 
// on newEl more than once.
// You cant insert one element in two places at once.

我知道这个问题已经有太多答案了，但没有一个符合我的确切要求。

我想要一个与parentNode行为完全相反的函数。insertBefore -也就是说，它必须接受一个空的referenceNode(接受的答案不接受)，而insertBefore将插入在子节点的末尾，这个必须插入在开始，因为否则根本没有办法用这个函数插入到开始位置;同样的原因insertBefore插入在末尾。

因为null referenceNode需要你定位父节点，我们需要知道父节点——insertBefore是parentNode的一个方法，所以它可以通过这种方式访问父节点;我们的函数没有，所以我们需要将父参数作为参数传递。

得到的函数如下所示:

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

或者(如果你必须这么做，我不建议你这么做)你当然可以增强Node原型:

if (! Node.prototype.insertAfter) {
  Node.prototype.insertAfter = function(newNode, referenceNode) {
    this.insertBefore(
      newNode,
      referenceNode ? referenceNode.nextSibling : this.firstChild
    );
  };
}

输入随身的“强暴”

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

好处:

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

缺点:

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

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

简单的JavaScript代码如下:

附加:

element.parentNode.insertBefore(newElement, element);

添加后:

element.parentNode.insertBefore(newElement, element.nextSibling);

但为了便于使用，可以在这里添加一些原型:

通过构建以下原型，您将能够直接从新创建的元素调用这些函数。

newElement.appendBefore(元素); newElement.appendAfter(元素);

.appendBefore(元素)的原型

Element.prototype.appendBefore = function (element) {
  element.parentNode.insertBefore(this, element);
},false;

.appendAfter(元素)的原型

Element.prototype.appendAfter = function (element) {
  element.parentNode.insertBefore(this, element.nextSibling);
},false;

代码片段以查看所有操作:

/* Adds Element BEFORE NeighborElement */ Element.prototype.appendBefore = function(element) { element.parentNode.insertBefore(this, element); }, false; /* Adds Element AFTER NeighborElement */ Element.prototype.appendAfter = function(element) { element.parentNode.insertBefore(this, element.nextSibling); }, false; /* Typical Creation and Setup A New Orphaned Element Object */ var NewElement = document.createElement('div'); NewElement.innerHTML = 'New Element'; NewElement.id = 'NewElement'; /* Add NewElement BEFORE -OR- AFTER Using the Aforementioned Prototypes */ NewElement.appendAfter(document.getElementById('Neighbor2')); div { text-align: center; } #Neighborhood { color: brown; } #NewElement { color: green; } <div id="Neighborhood"> <div id="Neighbor1">Neighbor 1</div> <div id="Neighbor2">Neighbor 2</div> <div id="Neighbor3">Neighbor 3</div> </div>

在JSFiddle上运行它