在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
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'."));
};
其他回答
或者你可以简单地这样做:
referenceNode.parentNode.insertBefore( newNode, referenceNode )
referenceNode.parentNode.insertBefore( referenceNode, newNode )
你可以在新版本的Chrome, Firefox和Opera中调用after()方法。这种方法的缺点是Internet Explorer还不支持它。
例子:
// You could create a simple node
var node = document.createElement('p')
// And then get the node where you want to append the created node after
var existingNode = document.getElementById('id_of_the_element')
// Finally you can append the created node to the exisitingNode
existingNode.after(node)
一个简单的HTML代码来测试: <!DOCTYPE html > < html > 身体< > < p id =“了”> < / p > < p id = "下来“> < / p > <button id="switchBtn" onclick="switch_place()“>开关的地方> < /按钮 <脚本> 函数switch_place () { var downElement = document.getElementById("down") var upElement = document.getElementById("up") downElement.after (upElement); . getelementbyid(“switchBtn”)。innerHTML = "切换!" } > < /脚本 < /身体> < / html >
正如预期的那样,它在向下的元素之后移动向上的元素
我知道这个问题已经有太多答案了,但没有一个符合我的确切要求。
我想要一个与parentNode行为完全相反的函数。insertBefore -也就是说,它必须接受一个空的referenceNode(接受的答案不接受),而insertBefore将插入在子节点的末尾,这个必须插入在开始,因为否则根本没有办法用这个函数插入到开始位置;同样的原因insertBefore插入在末尾。
因为null referenceNode需要你定位父节点,我们需要知道父节点——insertBefore是parentNode的一个方法,所以它可以通过这种方式访问父节点;我们的函数没有,所以我们需要将父参数作为参数传递。
得到的函数如下所示:
function insertAfter(parentNode, newNode, referenceNode) {
parentNode.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : parentNode.firstChild
);
}
或者(如果你必须这么做,我不建议你这么做)你当然可以增强Node原型:
if (! Node.prototype.insertAfter) {
Node.prototype.insertAfter = function(newNode, referenceNode) {
this.insertBefore(
newNode,
referenceNode ? referenceNode.nextSibling : this.firstChild
);
};
}
2022解决方案-元素
编辑:从2021年起,ChildNode已被合并到Element中。我把这个答案改成这样。
新文档:https://developer.mozilla.org/en-US/docs/Web/API/Element
这与ChildNode完全相同。“before”,“after”和“remove”属性现在只是普通元素api的一部分。
// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");
// Insert Before Element
el.before(newEl);
// Insert After Element
// Technically this would be invalid because
// I already inserted newEl before el.
// newEl changed location and is no longer a floating element.
// You cant insert one element in two places at once.
el.after(newEl);
// Another extra feature originally added with ChildNode is the .remove() method,
// which deletes the element from the DOM
el.remove();
newEl.remove();
2019年解决方案(过时)
我不推荐使用这个解决方案,但为了“历史”起见,我会把它保留在这里。
这比使用polyfill类型的原型重写更安全,它只是一个基本的功能。当然它不是很漂亮,但它是有效的。
// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");
// Function You Need
function insertAfter(el0, el1) {
el0.parentNode.insertBefore(el1, el0.nextSibling);
}
// Insert Before Element
el.insertBefore(newEl);
// Insert After Element
insertAfter(el, newEl);
// Just remember you cant use insertAfter() or .insertBefore()
// on newEl more than once.
// You cant insert one element in two places at once.
原始解决方案(不良做法)
我不建议使用这个解决方案,这是我最初在发布这个答案时使用的解决方案。为了“历史”,我把它留在这里
这只是一个不存在的. insertafter函数的填充。这个原型直接添加了函数HTMLElement.insertAfter(element);到HTMLElement原型:
// Parent
const el = document.body;
// New Element
const newEl = document.createElement("div");
// Custom Method
Element.prototype.insertAfter = function(new) {
this.parentNode.insertBefore(new, this.nextSibling);
}
// Insert Before Element
el.insertBefore(newEl)
// Insert After Element
el.insertAfter(newEl);
// Just remember you cant use .insertAfter() or .insertBefore()
// on newEl more than once.
// You cant insert one element in two places at once.
这段代码是为了在最后一个现有的子文件之后插入一个链接项,以内联一个小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);