JS - insertAfter方法的实现

第一种:直接在父节点里面插入的情况

//直接在节点原型上新增方法
//target为需要插入的新节点,ele为在其后面插入新节点的原始节点
Element.prototype.insertAfter = function(target, ele){
	const nextEle = ele.nextSibling || ele.nextElementSibling;
	if(nextEle){
		this.insertBefore(target, nextEle);
	}else{
		this.appendChild(target);//ele为最后一个节点,可直接使用appendChild
	}
}

第二种:兄弟节点插入

//target为需要插入的新节点,ele为在其后面插入新节点的原始节点
function insertAfter(target, ele){
	const parent = ele.parentNode;
	if(parent.lastChild === ele){ //ele为最后一个节点,可直接使用appendChild方法
		parent.appendChild(target);
	}else{
		parent.insertBefore(target, ele.nextSibling || ele.nextElementSibling);
	}
}

上一篇:vue ssr报错:Error while initializing app DOMException: Failed to execute ‘appendChild‘ on ‘Node‘: This


下一篇:DJango的html使用JS循环创建多个按钮元素