innerHTML 屬性的使用非常流行，因?yàn)樗峁┝撕?jiǎn)單的方法完全替代一個(gè) HTML 元素的內(nèi)容。另外一個(gè)方法是使用 DOM Level 2 API（removeChild, createElement, appendChild）。但很顯然，使用 innerHTML 修改 DOM tree 是非常容易且有效的方法。然而，你需要知道 innerHTML 有一些自身的問題：

1. 當(dāng) HTML 字符串包含一個(gè)標(biāo)記為 defer 的 script 標(biāo)簽（
   
   ）時(shí)，如 innerHTML 屬性處理不當(dāng)，在 Internet Explorer 上會(huì)引起腳本注入攻擊。


2. 設(shè)置 innerHTML 將會(huì)破壞現(xiàn)有的已注冊(cè)了事件處理函數(shù)的 HTML 元素，會(huì)在某些瀏覽器上引起內(nèi)存泄露的潛在危險(xiǎn)。

還有幾個(gè)其他次要的缺點(diǎn)，也值得一提的：

1. 你不能得到剛剛創(chuàng)建的元素的引用，需要你手動(dòng)添加代碼才能取得那些引用（使用 DOM APIs）。


2. 你不能在所有瀏覽器的所有 HTML 元素上設(shè)置 innerHTML 屬性（比如，Internet Explorer 不允許你在表格的行元素上設(shè)置innerHTML 屬性）。

我更關(guān)注與使用 innerHTML 屬性相關(guān)的安全和內(nèi)存問題。很顯然，這不是新問題，已經(jīng)有能人圍繞這些中的某些問題想出了方法。

Douglas Crockford 寫了一個(gè)清除函數(shù)，該函數(shù)負(fù)責(zé)中止由于 HTML 元素注冊(cè)事件處理函數(shù)引起的一些循環(huán)引用，并允許垃圾回收器（garbage collector）釋放與這些 HTML 元素關(guān)聯(lián)的內(nèi)存。

從 HTML 字符串中移除 script 標(biāo)簽并不像看上去那么容易。一個(gè)正則表達(dá)式可以達(dá)到預(yù)期效果，雖然很難知道是否覆蓋了所有的可能性。這里是我的解決方案：

/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig

現(xiàn)在，讓我們將這兩種技術(shù)結(jié)合在到一個(gè)單獨(dú)的 setInnerHTML 函數(shù)中，并將 setInnerHTML 函數(shù)綁定到 YUI 的 YAHOO.util.Dom 上：

YAHOO.util.Dom.setInnerHTML = function (el, html) {
    el = YAHOO.util.Dom.get(el);
    if (!el || typeof html !== 'string') {
        return null;
    }

    // 中止循環(huán)引用
    (function (o) {

        var a = o.attributes, i, l, n, c;
        if (a) {
            l = a.length;
            for (i = 0; i < l; i += 1) {
                n = a[i].name;
                if (typeof o[n] === 'function') {
                    o[n] = null;
                }
            }
        }

        a = o.childNodes;

        if (a) {
            l = a.length;
            for (i = 0; i < l; i += 1) {
                c = o.childNodes[i];

                // 清除子節(jié)點(diǎn)
                arguments.callee(c);

                // 移除所有通過YUI的addListener注冊(cè)到元素上所有監(jiān)聽程序
                YAHOO.util.Event.purgeElement(c);
            }
        }

    })(el);

    // 從HTML字符串中移除script，并設(shè)置innerHTML屬性
    el.innerHTML = html.replace(/<script[^>]*>[\S\s]*?<\/script[^>]*>/ig, "");

    // 返回第一個(gè)子節(jié)點(diǎn)的引用
    return el.firstChild;
};

如果此函數(shù)還應(yīng)有其他任何內(nèi)容或者在正則表達(dá)式中遺漏了什么，請(qǐng)讓我知道。

很明顯，在網(wǎng)頁上還有很多其他注入惡意代碼的方法。setInnerHTML 函數(shù)僅能在所有 A-grade 瀏覽器上規(guī)格化