W3C DOM Level2 Core規(guī)定,Document 接口下的 createElement 方法可以創(chuàng)建一個(gè)元素節(jié)點(diǎn)對(duì)象實(shí)例。它可以傳入一個(gè)字符串參數(shù) tagName,在 HTML 中,這個(gè)參數(shù)可以是任何形式,但tagName 應(yīng)為一個(gè)合法的標(biāo)簽名。
例如:document.createElement("td");//創(chuàng)建一個(gè)td
若 tagName 中出現(xiàn)不合法的字符,則應(yīng)拋出 INVALID_CHARACTER_ERR 異常。
由于微軟的強(qiáng)大,其產(chǎn)品IE使用了一些規(guī)范以外的規(guī)則,其中之一就與createElement方法有關(guān)。即:在 IE 中,createElement 方法不僅可以通過(guò)合法的標(biāo)簽名創(chuàng)建節(jié)點(diǎn)對(duì)象,還可以通過(guò)傳入一段合法的 HTML 代碼字符串作為參數(shù)創(chuàng)建節(jié)點(diǎn)對(duì)象。
例如:document.createElement("<input type='text' name='txtName'>");//創(chuàng)建一個(gè)name屬性為"txtName"的input
若使用了 IE 特有的通過(guò)為 createElement 傳入一段合法的 HTML 代碼字符串作為參數(shù)創(chuàng)建節(jié)點(diǎn)對(duì)象的方法,則在其他瀏覽器中將會(huì)拋出異常,并導(dǎo)致后續(xù)代碼無(wú)法執(zhí)行。這就造成了瀏覽器的兼容性問(wèn)題。
也許有的讀者會(huì)說(shuō),用 createElement 方法時(shí),使用傳入標(biāo)簽名的做法不就解決了兼容性問(wèn)題嗎?
例如:
var txt = document.createElement("input");
txt.type = "text";
txt.name = "txtName";
......
但在 IE6 , IE7 中,如果動(dòng)態(tài)生成 input 元素,是無(wú)法為其設(shè)置 name 屬性的,這是IE自身的問(wèn)題。這個(gè)時(shí)候,IE 特有的通過(guò)為 createElement 傳入一段合法的 HTML 代碼字符串作為參數(shù)創(chuàng)建節(jié)點(diǎn)對(duì)象的方法,就有了大顯身手的機(jī)會(huì)。不過(guò),IE 中無(wú)法為 input 設(shè)置 name 屬性的 bug 已經(jīng)在 IE8 中被修復(fù)。在其他瀏覽器中,不存在上述問(wèn)題。
所以,要最終解決 createElement 方法的兼容性問(wèn)題,還是要注意判斷瀏覽器,針對(duì) IE 可以使用其特有的通過(guò)為createElement 傳入一段合法的 HTML 代碼字符串作為參數(shù)的方法,非 IE 瀏覽器仍然使用 W3C 規(guī)范的標(biāo)準(zhǔn)方法。
例如:
if($.browser.msie) {
var txt = document.createElement("<input type='text' name='txtName'>")
} else {
var txt = document.createElement("input");
txt.type = "text";
txt.name = "txtName";
}