原生js实现jquery的insertBefore 和insertAfter 方法(四)
阅读原文时间:2021年04月20日阅读:1

网上实现类似方法都是针对相应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);
        }
    },

手机扫一扫

移动阅读更方便

阿里云服务器
腾讯云服务器
七牛云服务器