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);
<!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>
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'));
// 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);
}
}
// 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'."));
I wanted a function that has the exact opposite behavior of parentNode.insertBefore - 也就是说,它必须接受一个空 referenceNode (accepted answer没有),并且 insertBefore 将在子节点的末尾插入,这个必须在开头插入,否则就没有办法在开始时插入具有此功能的位置;同样的原因 insertBefore 插入到最后 .
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);
17 回答
insertBefore()方法与
parentNode.insertBefore()
类似 . 所以要模仿这个并制作方法parentNode.insertAfter()
我们可以编写以下代码 .JavaScript的
HTML
请注意,如this article中所述,扩展DOM可能不是适合您的解决方案 .
Hovewer,这篇文章写于2010年,现在情况可能有所不同 . 所以决定你自己 .
JavaScript DOM insertAfter() method @ jsfiddle.net
您可以使用
appendChild
函数在元素后插入 .参考:http://www.w3schools.com/jsref/met_node_appendchild.asp
或者你可以简单地做:
虽然
insertBefore()
(见MDN)很棒,但大多数答案都在这里引用 . 为了增加灵活性,并且要更加明确,您可以使用:insertAdjacentElement() (参见MDN)这允许您引用任何元素,并将要移动的元素准确插入所需的位置:
其他人考虑类似的用例:
insertAdjacentHTML()
和insertAdjacentText()
参考文献:
https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentElement https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentText
直截了当的JavaScript将如下:
Append Before:
Append After:
但是,在那里折腾一些原型以便于使用
通过构建以下原型,您将能够直接从新创建的元素中调用这些函数 .
newElement.appendBefore(element);
newElement.appendAfter(element);
.appendBefore(element) Prototype
.appendAfter(element) Prototype
并且,要查看所有操作,请运行以下代码段
Run it on JSFiddle
Google快速搜索显示this script
insertAdjacentHTML + outerHTML
上升空间:
DRYer:您不必将before节点存储在变量中并使用它两次 . 如果重命名变量,则在较少的情况下进行修改 .
golfs比
insertBefore
好(即使现有节点变量名称为3个字符长也会中断)缺点:
较新的浏览器支持:https://caniuse.com/#feat=insert-adjacent
将丢失元素的属性,例如事件,因为
outerHTML
将元素转换为字符串 . 我们需要它,因为insertAdjacentHTML
从字符串而不是元素添加内容 .insertAfter的强大实现 .
};
让我们处理所有场景
我知道这个问题已经有太多的答案,但它们都没有达到我的确切要求 .
I wanted a function that has the exact opposite behavior of parentNode.insertBefore - 也就是说,它必须接受一个空
referenceNode
(accepted answer没有),并且insertBefore
将在子节点的末尾插入,这个必须在开头插入,否则就没有办法在开始时插入具有此功能的位置;同样的原因insertBefore
插入到最后 .由于null
referenceNode
要求您找到父级,我们需要知道父级 -insertBefore
是parentNode
的方法,因此它可以通过这种方式访问父级;我们的函数不需要传递父作为参数 .结果函数如下所示:
或者(如果你必须,我不推荐它)你当然可以增强
Node
原型:node1.after(node2)
产生<node1/><node2/>
,其中node1和node2是DOM节点 .
.after()
是一个非常新的方法[1],因此浏览器支持可能是一个问题 .理想情况下
insertAfter
应该与insertBefore类似 . 以下代码将执行以下操作:如果没有子项,则追加新的
Node
如果没有引用
Node
,则追加新的Node
如果在引用
Node
之后没有Node
,则会追加新的Node
如果引用
Node
之后有一个兄弟,那么在该兄弟之前插入新的Node
返回新的
Node
Extending Node
One common example
See the code running
此代码用于将最后一个现有子项后面的链接项插入inlining一个小的css文件
referenceNode
是您要在之后放置newNode
的节点 . 如果referenceNode
是其父元素中的最后一个子元素,那很好,因为referenceNode.nextSibling
将null
和insertBefore通过添加到列表末尾来处理这种情况 .所以:
Try it here.