让Firefox支持insertAdjacentHTML和insertAdjacentText

这两个属性首先是IE4提出且实现的，它可以实现在一个 DOM 元素的前面、后面、第一个子元素前面、最后一个子元素后面四个位置，插入指定的 HTML 片段。 其它浏览器相继支持。唯有Firefox不支持，甚至新发布的FF4。insertAdjacentHTML已被HTML5采纳。

如下扩展HTMLElement.prototype，为其增加这两个属性。

if(HTMLElement.prototype.insertAdjacentHTML == undefined) {
    HTMLElement.prototype.insertAdjacentElement = function(where, node) {
        switch (where) {
            case "beforeBegin":
                this.parentNode.insertBefore(node, this);break;
            case "afterBegin":
                this.insertBefore(node, this.firstChild);break;
            case "beforeEnd":
                this.appendChild(node);break;
            case "afterEnd":
                if (this.nextSibling)
                    this.parentNode.insertBefore(node, this.nextSibling);
                else
                    this.parentNode.appendChild(node);
                break;
        }
    }
    HTMLElement.prototype.insertAdjacentHTML = function(where, html) {
        var r = this.ownerDocument.createRange();
        r.setStartBefore(this);
        var parsedHTML = r.createContextualFragment(html);
        this.insertAdjacentElement(where, parsedHTML);
    }
    HTMLElement.prototype.insertAdjacentText = function(where, txt) {
        var parsedText = document.createTextNode(txt);
        this.insertAdjacentElement(where, parsedText);
    }
}

 

注：2011-11 Firefox8发布，已支持insertAdjacentHTML，但仍未支持insertAdjacentText。

 

相关：

http://msdn.microsoft.com/en-us/library/ms536452(VS.85).aspx
http://msdn.microsoft.com/en-us/library/ms536453(VS.85).aspx
http://www.w3.org/TR/html5/apis-in-html-documents.html#insertadjacenthtml

https://developer.mozilla.org/en/DOM/element.insertAdjacentHTML