协慌网

JavaScript 中有insertBefore() ，但是如何在不使用 jQuery 或另一个库的情况下在另一个元素之后插入一个元素？

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

其中referenceNode是要在其后newNode如果referenceNode是其父元素中的最后一个子级，那很好，因为referenceNode.nextSibling将为null并且insertBefore通过添加到列表的末尾来处理这种情况。

所以：

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）原型

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

.appendAfter（element）原型

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

insertAdjacentHTML + outerHTML

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

优点：

• DRYer：您不必将 before 节点存储在变量中并使用两次。如果重命名该变量，则出现的情况要少修改。
• 比insertBefore更好（即使现有的节点变量名称为 3 个字符，也可以中断）

缺点：

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