如何在不使用库的情况下在JavaScript中将一个元素插入另一个元素之后？

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

要放在后面的节点在哪里。如果 是其父元素中的最后一个子元素，那很好，因为 will be 和 insertBefore 通过添加到列表的末尾来处理这种情况。referenceNodenewNodereferenceNodereferenceNode.nextSiblingnull

所以：

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

您可以使用以下代码段对其进行测试：

function insertAfter(referenceNode, newNode) {
  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">Hello</div>

简单的JavaScript将如下所示：

追加在之前：

element.parentNode.insertBefore(newElement, element);

追加在后面：

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

但是为了便于使用，把一些原型扔进去：

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

• newElement.appendBefore(element);

• newElement.appendAfter(element);

.appendBefore（element） Prototype

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

.appendAfter（element） Prototype

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上运行它