原生js实现jquery的insertBefore 和insertAfter 方法(四)

网上实现类似方法都是针对相应dom节点进行操作,但许多情况下,会拼接好相应html以字符串方式直接插入。
前不久做去jquery的时候用到类似方法,这里简单的记录下,直接上代码吧

insertAfter方法实现

//某个元素后插入
    insertAfter: function (newElement, targetElement) {
        targetElement=SeeUtils.getElObj(targetElement);
        if(targetElement==null){
            return void(0);
        }

        var parent = targetElement.parentNode;
        // 如果最后的节点是目标元素,则直接添加
        if (parent.lastChild == targetElement) {
            if(typeof newElement === 'string'){
                var temp = document.createElement('div');
                temp.innerHTML = newElement;
                // 防止元素太多 进行提速
                var frag = document.createDocumentFragment();
                while (temp.firstChild) {
                    frag.appendChild(temp.firstChild);
                }
                parent.appendChild(frag);
            }else{
                parent.appendChild(newElement)
            }
        } else {
            if(typeof newElement === 'string'){
                var temp = document.createElement('div');
                temp.innerHTML = newElement;
                // 防止元素太多 进行提速
                var frag = document.createDocumentFragment();
                while (temp.firstChild) {
                    frag.appendChild(temp.firstChild);
                }
                parent.insertBefore(frag, targetElement.nextSibling);
            }else{
                //如果不是,则插入在目标元素的下一个兄弟节点 的前面
                parent.insertBefore(newElement, targetElement.nextSibling);
            }
        }
    },

insertBefore方法实现:

 //某个元素前插入
    insertBefore:function(newElement, targetElement){
        targetElement=SeeUtils.getElObj(targetElement);
        if(targetElement==null){
            return void(0);
        }
        var parent = targetElement.parentNode;
        // 如果最后的节点是目标元素,则直接添加
        if(typeof newElement === 'string'){
            var temp = document.createElement('div');
            temp.innerHTML = newElement;
            // 防止元素太多 进行提速
            var frag = document.createDocumentFragment();
            while (temp.firstChild) {
                frag.appendChild(temp.firstChild);
            }
            parent.insertBefore(frag, targetElement);
        }else{
            parent.insertBefore(newElement, targetElement);
        }
    },
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 2
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值