1. 程式人生 > >原生js實現jquery的insertBefore 和insertAfter 方法(四)

原生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);
        }
    },