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

最新推荐文章于 2025-06-29 23:21:47 发布

飞天代码

最新推荐文章于 2025-06-29 23:21:47 发布

阅读量3.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： javascript

本文链接：https://blog.youkuaiyun.com/weiyongliang_813/article/details/80518102

javascript 专栏收录该内容

26 篇文章

订阅专栏

本文介绍了一种不依赖于jQuery的DOM元素插入方法，包括insertAfter和insertBefore两种方法的具体实现，适用于直接插入HTML字符串的情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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