js document.createElement浏览器兼容处理

js document.createElement浏览器兼容处理

1：innerText 

IE支持，FIREFOX不支持 

解决办法：用innerHTML,2种浏览器都识别innerHTML 

2：document.createElement_x 

document.appendChild 

在往表里插入行时 

FIREFOX支持，IE不支持 

解决办法：把行插入到TBODY中，不要直接插入到表 

3：setAttribute('style','color:red;') 

FIREFOX 支持(除了IE，现在所有浏览器都支持)，IE不支持 

解决办法：不用setAttribute('style','color:red') 

而用object.style.cssText = 'color:red;'(这写法也有例外) 

最好的办法是上面种方法都用上，万无一失 ^_^ 

4:class 

setAttribute('class','styleClass') 

FIREFOX 支持，IE不支持(指定属性名为CLASS，IE不会设置元素的CLASS属性，相反只使用SETATTRIBUTE时IE自动识别CLASSNAME属性) 

解决办法： 

setAttribute('className','styleClass') 

2 种都用上 

5:用setAttribute设置事件 

var obj = document.getElementByIdx_x('objId'); 

obj.setAttribute('onclick','funcitonname();'); 

FIREFOX 支持，IE不支持 

解决办法： 

IE中必须用点记法来引用所需的事件处理程序,并且要用赋予匿名函数 

如下： 

var obj = document.getElementByIdx_x('objId'); 

obj.οnclick=function(){fucntionname();}; 

这种方法所有浏览器都支持 

6：建立单选钮 

IE以外的浏览器 

var rdo = document.createElement_x('input'); 

rdo.setAttribute('type','radio'); 

rdo.setAttribute('name','radiobtn'); 

rdo.setAttribute('value','checked'); 

IE: 

var rdo =document.createElement_x("<input type='radio' name='radiobtn' value='checked'>"); 

解决办法： 

这一点区别和前面的都不一样。这次完全不同，所以找不到共同的办法来解决，那么只有IF-ELSE了 

万幸的是，IE可以识别出document的uniqueID属性，别的浏览器都不可以识别出这一属性。问题解决。 

0：共同的一些技巧 

在动态建立INPUT型输入元素时，一般是先加入，在设置TYPE。这就有可能出错 

好习惯：var btn = document.createElement_x('input'); 

btn.setAttribut('type','button'); 

document.getElementByIdx_x('formId').appendChild(btn); 

GWT-EXT2.0+struts2+hibernate+ejb++spring