将目标元素在基准元素前|后插入

最新推荐文章于 2021-09-17 20:24:53 发布

最新推荐文章于 2021-09-17 20:24:53 发布 · 260 阅读

文章标签：

#insertBefore #insertAfter

本文介绍了如何使用ZYC.dom.insertBefore和ZYC.dom.insertAfter方法在指定元素前后插入新的DOM元素，并提供了具体的JavaScript实现代码。

api的应用场景是：在基准的元素前|后插入一个目标元素

关于ZYC.dom.g的资料：http://zhangyaochun.iteye.com/blog/1439262

关于insertBefore的理解：http://zhangyaochun.iteye.com/blog/1472621

/*
*insertBefore*
*@function*
*@param {String|HTMLElement} newEle  the new element to insert*
*@param {String|HTMLElement} existEle the base existEle*
*/
ZYC.dom.insertBefore = function(newEle,existEle){
    newEle = ZYC.dom.g(newEle);
    existEle = ZYC.dom.g(existEle);
	existParent = existEle.parentNode;
	if(existParent){
	   existParent.insertBefore(newEle,existEle);
	}
	return newEle;
};

/*
*insertAfter*
*@function*
*@param {String|HTMLElement} newEle  the new element to insert*
*@param {String|HTMLElement} existEle the base existEle*
*/
ZYC.dom.insertAfter = function(newEle,existEle){
    newEle = ZYC.dom.g(newEle);
    existEle = ZYC.dom.g(existEle);
	existParent = existEle.parentNode;
	if(existParent){
	   existParent.insertBefore(newEle,existEle.nextSibling);
	}
	return newEle;
};

其实原理还是那个原生的insertBefore