FF下支持IE特有的insertAdjacentElement以及insertAdjacentHTML

网摘：

在ie下这连个函数主要是向目标元素对象插入一个新的子元素，子元素可以使element也可以是html代码片段

由于FF中没有这两个函数，因此我们可以通过扩展HTMLElement来解决这个问题：

if(typeof HTMLElement!="undefined" && !HTMLElement.prototype.insertAdjacentElement)
{
     HTMLElement.prototype.insertAdjacentElement = function(where,parsedNode)
     {
        switch (where)
        {
            case 'beforeBegin':
                this.parentNode.insertBefore(parsedNode,this)
                break;
            case 'afterBegin':
                this.insertBefore(parsedNode,this.firstChild);
                break;
            case 'beforeEnd':
                this.appendChild(parsedNode);
                break;
            case 'afterEnd':
                if (this.nextSibling) this.parentNode.insertBefore(parsedNode,this.nextSibling);
                    else this.parentNode.appendChild(parsedNode);
                break;
         }
     }

     HTMLElement.prototype.insertAdjacentHTML = function (where,htmlStr)
     {
         var r = this.ownerDocument.createRange();
         r.setStartBefore(this);
         var parsedHTML = r.createContextualFragment(htmlStr);
         this.insertAdjacentElement(where,parsedHTML)
     }

     HTMLElement.prototype.insertAdjacentText = function (where,txtStr)
     {
         var parsedText = document.createTextNode(txtStr)
         this.insertAdjacentElement(where,parsedText)
     }
}

使用的方法很简单：

    if(e.insertAdjacentElement)
        {
            e.insertAdjacentElement("beforeEnd" , el);
        }
        else
        {
            e.insertAdjacentHTML("beforeEnd" , el.outerHTML);
        }

转载于:https://www.cnblogs.com/tatame/archive/2012/11/19/2777185.html