使用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()。

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