在JavaScript中有insertBefore(),但如何在不使用jQuery或其他库的情况下在另一个元素之后插入一个元素?
当前回答
输入随身的“强暴”
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
好处:
烘干机:你不需要将before节点存储在变量中并使用它两次。如果重命名变量,就少发生修改。 golfs比insertBefore更好(如果现有的节点变量名是3个字符长,则打破平衡)
缺点:
较低的浏览器支持,因为更新:https://caniuse.com/#feat=insert-adjacent 将丢失元素的属性,例如事件,因为outerHTML将元素转换为字符串。我们需要它是因为insertAdjacentHTML从字符串而不是元素中添加内容。
其他回答
输入随身的“强暴”
elementBefore.insertAdjacentHTML('afterEnd', elementAfter.outerHTML)
好处:
烘干机:你不需要将before节点存储在变量中并使用它两次。如果重命名变量,就少发生修改。 golfs比insertBefore更好(如果现有的节点变量名是3个字符长,则打破平衡)
缺点:
较低的浏览器支持,因为更新:https://caniuse.com/#feat=insert-adjacent 将丢失元素的属性,例如事件,因为outerHTML将元素转换为字符串。我们需要它是因为insertAdjacentHTML从字符串而不是元素中添加内容。
这段代码是为了在最后一个现有的子文件之后插入一个链接项,以内联一个小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);
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'."));
};
快速搜索谷歌会显示这个脚本
// 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);
}
}
方法节点。After (doc)在另一个节点之后插入一个节点。
对于两个DOM节点node1和node2,
node1.after(node2)在node1之后插入node2。
这个方法在旧的浏览器中是不可用的,所以通常需要填充。