如何在不使用库的情况下在JavaScript的另一个元素之后插入元素？
在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); }
在这里尝试。
快速谷歌search显示此脚本
// 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将是以下内容：
追加前：
element.parentNode.insertBefore(newElement, element);
追加后：
element.parentNode.insertBefore(newElement, element.nextSibling);
但是，抛出一些原型，以方便使用
通过构build以下原型，您将能够直接从新创build的元素中调用这些函数。
-
newElement.appendBefore(element); -
newElement.appendAfter(element);
.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>
insertAdjacentHTML + outerHTML
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
上升空间：
- DRYer：你不必将before节点存储在一个variables中并使用它两次。 如果你重命名variables，就更less发生修改。
- 高尔夫比
insertBefore更好（即使现有的节点variables名称是3个字符也是如此）
缺点：
- 降低浏览器支持
- 将会失去事件的属性，因为
outerHTML将元素转换为string。 我们需要它，因为insertAdjacentHTML从string而不是元素添加内容。
或者你可以简单地做：
referenceNode.parentNode.insertBefore( newNode, referenceNode ) referenceNode.parentNode.insertBefore( referenceNode, newNode )
node1.after(node2)生成<node1/><node2/> ，
其中node1和node2是DOM节点。
.after()是一个非常新的方法[1] ，所以浏览器支持可能是一个问题。
步骤1.准备元素：
var element = document.getElementById('ElementToAppendAfter'); var newElement = document.createElement('div'); var elementParent = element.parentNode;
第2步。追加：
elementParent.insertBefore(newElement, element.nextSibling);
像parentNode.insertBefore()一样使用insertBefore（）方法。 所以要模仿这个，并做一个方法parentNode.insertAfter()我们可以写下面的代码。
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
<div id="divOne"> <p id="pOne">paragraph one</p> <p id="pTwo">paragraph two</p> </div>
请注意，如本文所述，扩展DOM可能不是您正确的解决scheme。
Hovewer，这篇文章是在2010年写的，现在可能会有所不同。 所以决定你自己的。
JavaScript DOM insertAfter（）方法@ jsfiddle.net
伟大的达斯汀·迪亚兹（Dustin Diaz）在一篇文章中写道：分析它，并在第一个答案中提供代码，稍作修改：
function insertAfter(parent, node, referenceNode) { parent.insertBefore(node, referenceNode.nextSibling); }
理想情况下， insertAfter应该类似于insertBefore 。 下面的代码将执行以下操作：
- 如果没有孩子，则添加新的
Node - 如果没有参考
Node，则添加新的Node - 如果参考
Node之后没有Node，则添加新的Node - 如果参考
Node有一个兄弟Node则在该兄弟Node之前插入新的Node - 返回新的
Node
扩展Node
Node.prototype.insertAfter = function(node, referenceNode) { if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; };
一个常见的例子
node.parentNode.insertAfter(newNode, node);
看代码运行
// First extend Node.prototype.insertAfter = function(node, referenceNode) { if (node) this.insertBefore(node, referenceNode && referenceNode.nextSibling); return node; }; var referenceNode, newNode; newNode = document.createElement('li') newNode.innerText = 'First new item'; newNode.style.color = '#FF0000'; document.getElementById('no-children').insertAfter(newNode); newNode = document.createElement('li'); newNode.innerText = 'Second new item'; newNode.style.color = '#FF0000'; document.getElementById('no-reference-node').insertAfter(newNode); referenceNode = document.getElementById('no-sibling-after'); newNode = document.createElement('li'); newNode.innerText = 'Third new item'; newNode.style.color = '#FF0000'; referenceNode.parentNode.insertAfter(newNode, referenceNode); referenceNode = document.getElementById('sibling-after'); newNode = document.createElement('li'); newNode.innerText = 'Fourth new item'; newNode.style.color = '#FF0000'; referenceNode.parentNode.insertAfter(newNode, referenceNode);
<h5>No children</h5> <ul id="no-children"></ul> <h5>No reference node</h5> <ul id="no-reference-node"> <li>First item</li> </ul> <h5>No sibling after</h5> <ul> <li id="no-sibling-after">First item</li> </ul> <h5>Sibling after</h5> <ul> <li id="sibling-after">First item</li> <li>Third item</li> </ul>
这段代码是用来在最后一个存在的孩子之后插入一个链接项来内联一个小的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);
<!DOCTYPE html> <html lang="ca"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function createDiv(){ var newDiv = document.createElement("div"); var txt = document.createTextNode("I'm the second div"); newDiv.appendChild(txt); var x = document.getElementsByTagName("BODY")[0]; x.insertBefore(newDiv, third); } </script> </head> <body> <div class="first"> <p> I'm the first div </p> </div> <div id="third"> <p> I'm the third div </p> </div> <button type= " button " name= " button " onclick = " createDiv() " > Create the second Div </button> </body> </html>
你可以使用appendChild函数在元素后面插入。
参考： http : //www.w3schools.com/jsref/met_node_appendchild.asp
一个强大的insertAfter实现。
// source: https://github.com/jserz/domPlus/blob/master/src/insertAfter()/insertAfter.js Node.prototype.insertAfter = Node.prototype.insertAfter || function (newNode, referenceNode) { function isNode(node) { return node instanceof Node; } if(arguments.length < 2){ throw(new TypeError("Failed to execute 'insertAfter' on 'Node': 2 arguments required, but only "+ arguments.length +" present.")); } if(isNode(newNode)){ if(referenceNode === null || referenceNode === undefined){ return this.insertBefore(newNode, referenceNode); } if(isNode(referenceNode)){ return this.insertBefore(newNode, referenceNode.nextSibling); } throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 2 is not of type 'Node'.")); } throw(new TypeError("Failed to execute 'insertAfter' on 'Node': parameter 1 is not of type 'Node'."));
};
