jQuery 使用 innerHTML 的問題

by thinker

關鍵字:

=== InnerHTML ===
jQuery 在產生 DOM node 的支援能力上，大量的使用 innerHTML。這造成了 IE 平台和 Mozilla/$Firefox$ 平台的不一致，特別是 table。通常 $Firefox$/Mozilla 能忠實的產生 programmer 所指定的 node ，但 IE 卻會加油添醋。以 table 為例:
{{{
$$("div").wrap("<table><tr><td></td></tr></table>");
}}}
在 IE 在 parse innerHTML 時，實際上產生
{{{
<table><tbody><tr><td></td></tr></tbody></table>
}}}
這在會使的 css 在某些狀況下，套用不正確。

=== Table ===
而 IE 的 tr node 也必需正確的為 tbody node 或 thead node 的 children，否則無法顯示。這部分， IE 和 HTML4 的規則不相符，而 $Firefox$/Mozilla 則處理的很好。

=== 替代 ===
基於這些原因， jQuery 原本所提供的 append/wrap/before/..... 等，產生 DOM node 的功能，最好不要使用。改而使用
{{{
jQuery.fn.extend({
    wrapNode: function(o) {
        if(typeof o == "string")
            o = jQuery.newTag(o);
        o = $$(o);
        this.before(o);
        o.append(this);
        return this;
    }
});

jQuery.extend({
    newTag: function(tname) {
        return document.createElement(tname);
    }
});
}}}
這樣或類似的替代品。使用$範例$:
{{{
$$("div").wrapNode("table").wrapNode("tbody").wrapNode("tr").wrapNode("td");
}}}
並使用完整的結構，例如 table 下面一定要有 tbody 或 thead，而 tr 一定在 tbody 或 thead 之下。

=== 結論 ===
這樣的寫法雖然麻煩，但比較能正確的在 IE 和 $Firefox$/Mozilla 間，同時運作，避免一些意外的情形。IE 此類加油添醋的行為，屢見不鮮。如，無故加個空白的 text node 之類的，也常造成困擾。因而，鄙人多採用 DOM 的方式產生 node，決不使用 innerHTML ，以避產生這類意外。

最後更新時間: 2007-02-02 10:28:23 CST | 引用

查詢:

COMMENTS:

on 2007-02-03 01:26:22 CST

遊手好閒的石頭成 said ..

這其實是 IE 的問題，有趣的是，在 MSDN 中找得到解除方法。又一個把 IE 的 bug 當技術文章的。我的解法: http://blog.roodo.com/rocksaying/archives/2690905.html 因為引用會失敗，所以用留言的方式。

on 2007-02-03 11:29:22 CST

Thinker said ..

感謝石頭成的補充，互相接力，內容更充實 :)