本文翻译自：How to insert an element after another element in JavaScript without using a library?
在JavaScript中有insertBefore() ，但是如何在不使用jQuery或其他库的情况下在另一个元素之后插入元素？
#1楼
参考：https://stackoom.com/question/K72C/如何在不使用库的情况下在JavaScript中的另一个元素之后插入元素
#2楼
insertAdjacentHTML + outerHTML insertAdjacentHTML + outerHTML
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
Upsides: 上升空间：
- DRYer: you don't have to store the before node in a variable and use it twice. DRYer：您不必将before节点存储在变量中并使用它两次。 If you rename the variable, on less occurrence to modify. 如果重命名变量，则在较少的情况下进行修改。
- golfs better than the
insertBefore(break even if the existing node variable name is 3 chars long) 高尔夫球比insertBefore更好（即使现有的节点变量名称是3个字符长也会中断）
Downsides: 缺点：
- lower browser support since newer: https://caniuse.com/#feat=insert-adjacent 更新浏览器支持： https ： //caniuse.com/#feat=insert-adjacent
- will lose properties of the element such as events because
outerHTMLconverts the element to a string. 将丢失元素的属性，例如events，因为outerHTML将元素转换为字符串。 We need it becauseinsertAdjacentHTMLadds content from strings rather than elements. 我们需要它，因为insertAdjacentHTML从字符串而不是元素添加内容。
#3楼
insertBefore() method is used like parentNode.insertBefore() . insertBefore（）方法与parentNode.insertBefore()一样使用。 So to imitate this and make a method parentNode.insertAfter() we can write the following code. 因此，为了模仿这个并创建一个方法parentNode.insertAfter()我们可以编写以下代码。
JavaScript JavaScript的
Node.prototype.insertAfter = function(newNode, referenceNode) {
return referenceNode.parentNode.insertBefore(
newNode, referenceNode.nextSibling); // based on karim79's solution
};
// getting required handles
var refElem = document.getElementById("pTwo");
var parent = refElem.parentNode;
// creating <p>paragraph three</p>
var txt = document.createTextNode("paragraph three");
var paragraph = document.createElement("p");
paragraph.appendChild(txt);
// now we can call it the same way as insertBefore()
parent.insertAfter(paragraph, refElem);
HTML HTML
<div id="divOne">
<p id="pOne">paragraph one</p>
<p id="pTwo">paragraph two</p>
</div>
Note, that extending the DOM might not be the right solution for You as stated in this article . 请注意，延长DOM可能不适合你的解决方案中所述这篇文章 。
Hovewer, this article was written in 2010 and things might be different now. Hovewer，这篇文章写于2010年，现在情况可能有所不同。 So decide on Your own. 所以决定你自己。
JavaScript DOM insertAfter() method @ jsfiddle.net JavaScript DOM insertAfter（）方法@ jsfiddle.net
#4楼
This code is work to insert a link item right after the last existing child to inlining a small css file 此代码用于在最后一个现有子项之后插入链接项以内联小型css文件
var raf, cb=function(){
//create newnode
var link=document.createElement('link');
link.rel='stylesheet';link.type='text/css';link.href='css/style.css';
//insert after the lastnode
var nodes=document.getElementsByTagName('link'); //existing nodes
var lastnode=document.getElementsByTagName('link')[nodes.length-1];
lastnode.parentNode.insertBefore(link, lastnode.nextSibling);
};
//check before insert
try {
raf=requestAnimationFrame||
mozRequestAnimationFrame||
webkitRequestAnimationFrame||
msRequestAnimationFrame;
}
catch(err){
raf=false;
}
if (raf)raf(cb); else window.addEventListener('load',cb);
#5楼
Or you can simply do: 或者你可以简单地做：
referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
#6楼
Straightforward JavaScript Would Be the Following: 直截了当的JavaScript将是以下：
Append Before: 追加之前：
element.parentNode.insertBefore(newElement, element);
Append After: 追加后：
element.parentNode.insertBefore(newElement, element.nextSibling);
But, Toss Some Prototypes In There For Ease of Use 但是，在那里折腾一些原型以便于使用
By building the following prototypes, you will be able to call these function directly from newly created elements. 通过构建以下原型，您将能够直接从新创建的元素中调用这些函数。
newElement.appendBefore(element);newElement.appendAfter(element);
.appendBefore(element) Prototype .appendBefore（element）原型
Element.prototype.appendBefore = function (element) {
element.parentNode.insertBefore(this, element);
},false;
.appendAfter(element) Prototype .appendAfter（element）原型
Element.prototype.appendAfter = function (element) {
element.parentNode.insertBefore(this, element.nextSibling);
},false;
And, To See It All In Action, Run the Following Code Snippet 并且，要查看所有操作，请运行以下代码段
/* 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> 