IE的setAttribute中与标准浏览器的有许多不同，一不小心地踩雷。你不能用它来设置name属性，你也不能在元素加入DOM后设置type属性，也不能用它直接设置内联事件（ inline event handlers），也不能用它设置样式……
在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在IE8中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

 

 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug  By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.         var form = document.createElement("form"); 
  11.         var input = document.createElement("input"); 
  12.         var root = document.body; 
  13.         input.setAttribute("name", "test"); 
  14.         root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 
  15.         form.appendChild(input);        
  16.         alert(form.elements.test)     
  17.       } 
  18.     </script> 
  19.  
  20.   </head> 
  21.   <body> 
  22.     <h3>请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……</h3> 
  23.   </body> 
  24. </html> 
 
  
解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。
 
  
 
 
  
 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.         var body = document.body; 
  11.         var form = document.createElement("form"); 
  12.         form.innerHTML = "<input name='test' type='text' />" 
  13.         body.appendChild(form); 
  14.         alert(form.elements.test) 
  15.       } 
  16.     </script> 
  17.  
  18.   </head> 
  19.   <body> 
  20.     <h3>请在IE6与IE7下浏览</h3> 
  21.   </body> 
  22. </html> 
 
  
另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。
 
  
 
 
  
 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.         var body = document.body; 
  11.         var form = document.createElement("form"); 
  12.         try{ 
  13.           var input = document.createElement("<input type='text' name='test'>"); 
  14.         }catch(e){ 
  15.           var input = document.createElement("input"); 
  16.           input.setAttribute("name", "test") 
  17.         } 
  18.         body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 
  19.         form.appendChild(input); 
  20.         alert(form.elements.test) 
  21.       } 
  22.     </script> 
  23.  
  24.   </head> 
  25.   <body> 
  26.     <h3>请在IE6与IE7下浏览</h3> 
  27.   </body> 
  28. </html> 
 
  
但name只是冰山一角，setAttribute在设置属性时，有许多属性在IE下与标准浏览器的命名是不一样的，看一下jQuery，发现它也是不全的。许多地雷埋在这里，总有一个你迟早会中的。下面是一个详尽的参照表：左边为标准游览器的，右边是IE的。
 
  
 
 
  
 
  
  1. var IEfix = { 
  2.   acceptcharset: "acceptCharset", 
  3.   accesskey: "accessKey", 
  4.   allowtransparency: "allowTransparency", 
  5.   bgcolor: "bgColor", 
  6.   cellpadding: "cellPadding", 
  7.   cellspacing: "cellSpacing", 
  8.   "class":  "className", 
  9.   colspan:  "colSpan", 
  10.   checked: "defaultChecked", 
  11.   selected: "defaultSelected", 
  12.   "for":  "htmlFor" , 
  13.   frameborder:  "frameBorder", 
  14.   hspace:  "hSpace", 
  15.   longdesc:  "longDesc", 
  16.   maxlength:  "maxLength", 
  17.   marginwidth:  "marginWidth", 
  18.   marginheight:  "marginHeight", 
  19.   noresize:  "noResize", 
  20.   noshade:  "noShade", 
  21.   readonly: "readOnly", 
  22.   rowspan:  "rowSpan", 
  23.   tabindex:  "tabIndex", 
  24.   valign:  "vAlign", 
  25.   vspace:  "vSpace" 
  26. } 
 
  
IE不能用setAttribute为dom元素设置onXXX属性，换言之，不能用setAttribute设置事件。
 
  
 
 
  
 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.         var body = document.body; 
  11.         var form = document.createElement("form"); 
  12.         form.innerHTML = "<input name='test' type='text' />" 
  13.         body.appendChild(form); 
  14.         form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
  15.       } 
  16.     </script> 
  17.  
  18.   </head> 
  19.   <body> 
  20.     <h3>用setAttribute设置事件</h3> 
  21.     <p>在IE下文本域获得焦点后并没有弹出预期的alert!</p> 
  22.   </body> 
  23. </html> 
 
  
IE要直接赋给一个函数！
 
  
 
 
  
 
  
  1. var body = document.body; 
  2. var form = document.createElement("form"); 
  3. form.innerHTML = "<input name='test' type='text' />" 
  4. body.appendChild(form); 
  5. if(!+"\v1"){ 
  6.   form.elements.test.setAttribute("onfocus", function(){alert(this.name)}); 
  7. }else{ 
  8.   form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
  9. }       
 
  
 
 
  
 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.         var body = document.body; 
  11.         var form = document.createElement("form"); 
  12.         form.innerHTML = "<input name='test' type='text' />" 
  13.         body.appendChild(form); 
  14.  
  15.         if(!+"\v1"){ 
  16.           form.elements.test.setAttribute("onfocus", function(){alert(this.name)}); 
  17.         }else{ 
  18.           form.elements.test.setAttribute("onfocus", "alert(this.name)"); 
  19.         }         
  20.       } 
  21.     </script> 
  22.  
  23.   </head> 
  24.   <body> 
  25.     <h3>IE用setAttribute设置事件要直接赋函数！</h3> 
  26.   </body> 
  27. </html> 
 
  
在IE6与IE7中也不能用setAttribute设置样式:dom.setAttribute("style","font-size:14px")
 
  
 
 
  
 
  
  1.   
  2. <!doctype html> 
  3. <html dir="ltr" lang="zh-CN"> 
  4.   <head> 
  5.     <meta charset="utf-8"/> 
  6.     <title>setAttribute bug By 司徒正美</title> 
  7.     <meta http-equiv="X-UA-Compatible" content="IE=7"> 
  8.     <script type="text/javascript"> 
  9.       window.onload = function(){ 
  10.        var styleData = 'border:1px solid #000;background:#F1FAFA;font-weight:bold;'; 
  11.         var h3 = document.getElementsByTagName("h3")[0] 
  12.       
  13.         h3.setAttribute('style', styleData); 
  14.       } 
  15.     </script> 
  16.  
  17.   </head> 
  18.   <body> 
  19.     <h3>IE6与IE7看不到效果！</h3> 
  20.   </body> 
  21. </html> 
 
  
原文地址：http://www.cnblogs.com/rubylouvre/archive/2009/12/01/1614251.html