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);
        }
posted @ 2012-11-19 14:08  园林鸟  阅读(1533)  评论(1编辑  收藏  举报