原生js实现jquery的insertBefore 和insertAfter 方法（四）

ゝ一世哀愁。 2022-05-23 02:06 202阅读 0赞

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