使用insertBefore实现insertAdjacentHTML()

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

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

　　(beforebegin) <div id="target"> (afterbegin) This is the element content (beforeend) </div> (afterend)

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

appendChild()方法是在需要插入的Element节点上调用的，它插入指定的节点使用其成为那个节点的最后一个节点。
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

巴特西

使用insertBefore实现insertAdjacentHTML()

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

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

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

最新文章

热门文章