您的位置: 首页  >  IT文章  >  使用insertBefore实现insertAdjacentHTML()

使用insertBefore实现insertAdjacentHTML()

分类: IT文章 • 2022-08-27 20:36:51

  • Element.insertAdjacentHTML()方法由IE引入，并在HTML5中标准化，它将任意的HTML标记字符串插入到指定的元素“相邻”的位置。

　　insertAdjacentHTML()有两个参数，第一个参数为位置属性，第二个参数为待插入的标记字符串。且第一个参数为具有以下值之一的字符串：“beforebegin”、"afterbegin"、"beforeend"、"afterend"，这些值插入点为：

　　(beforebegin) <div >(afterend)

  • 插入节点的为Node的方法appendChild()或insertBefore()。

  1. appendChild()方法是在需要插入的Element节点上调用的，它插入指定的节点使用其成为那个节点的最后一个节点。
  2. insertBefore()方法是新节点的父节点上调用并接受两个参数。第一个参数是待插入的节点，第二个参数是已存在的节点，新节点将插入到该节点的前面。如果第二个参数为null，其行为和appendChild()一样。

  • DocumentFragment是一种特殊的Node，它作为其他节点的一个临时的容器。　　

　　注意documentFrament的parentNode总是为null。如果给appendChild()、insertBefore()、replaceChild()传递一个DocumentFragment,其实是将该文档片段的所有子节点插入到文档中，而非片段本身。

为了使insertAdjacentHTML()方法兼容所有浏览器，并给它定义了一组更符合逻辑的名字，使用insertBefore()实现Insert.before(),Insert.after(),Insert.atAfter(),Insert.atEnd()方法。代码如下：

var Insert=(function(){
    //如果元素有原生的insertAdjacentHTML,
    //在4个函数名了的HTML插入函数中直接使用
    if(document.createElement("div").insertAdjacentHTML){
        return {
            before:function(e,h){e.insertAdjacentHTML("beforebegin",h);},
            after:function(e,h){e.insertAdjacentHTML("afterend",h);},
            atStart:function(e,h){e.insertAdjacentHTML("beforebegin",h);},
            atEnd:function(e,h){e.insertAdjacentHTML("afterend",h);}
        };
    }
    //浏览不支持insertAdjacentHTML则通过insertBefor来实现
    function fragment(html){
        var elt=document.createElement("div");            //创建空文档
        var frag=document.createDocumentFragment();        //创建空文档片段
        elt.innerHTML=html;                                //设置文档内容
        while(elt.firstChild)                            //移动所有的节点
            frag.appendChild(elt.firstChild);
        return frag;
    }
    
    var Insert={
        before:function(elt,html){
            elt.parentNode.insertBefore(frament(html),elt);
        },
        after:function(elt,html){
            elt.parentNode.insertBefore(fragment(html),elt.nextSibling);
        },
        atStart:function(elt,html){
            elt.insertBefore(fragment(html),elt.firstChild);
        },
        atEnd:function(elt,html){
            elt.insertBefore(fragment(html));
            //insertBefore第二参数为null时，其行为类似于appendHTML()，它将节点插入到最后。
        }
    }
    
    Element.prototype.insertAdjacentHTML=function(pos,html){
        switch(pos.toLowerCase()){
            case "beforebegin":return Insert.before(this,html);
            case "afterend":return Insert.after(this,html);
            case "afterbegin":return Insert.atStart(this,html);
            case "beforeend":return Insert.atEnd(this,html);
        }
    }
    return Insert;
}());

　　引自《JavaScript权威指南》 15.6

相关推荐