IE 浏览器的 setAttribute bug

发布时间：2018-09-01 08:22 所属栏目：30 来源：站长网

导读：烈火网(LieHuo.Net)教程在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在 IE8 中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。 !doctyp

　　烈火网(LieHuo.Net)教程在IE6,IE7中，如果动态生成input元素，是无法为其设置name属性的。当然这bug已经在IE8中被修复，详见这里。由于name属性对表单元素非常重要（在提交表单时，与value属性组成键值对，发送到后台），因此必须留意这个bug。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>setAttribute bug By 司徒正美</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> <script type="text/javascript"> window.onload = function(){ var form = document.createElement("form"); var input = document.createElement("input"); var root = document.body; input.setAttribute("name", "test"); root.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 form.appendChild(input); alert(form.elements.test) } </script> </head> <body> <h3>请在IE6与IE7下浏览，当然IE8也可以，我已让IE8处在IE7的兼容模式下运作。兼容模式连bugs也兼容了……</h3> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　解决办法有两个，如用innerHTML，觉得innerHTML真是一个伟大的发明，连火狐与W3C那帮死对头也不得不屈服。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>setAttribute bug By 司徒正美</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> <script type="text/javascript"> window.onload = function(){ var body = document.body; var form = document.createElement("form"); form.innerHTML = "<input name='test' type='text' />" body.appendChild(form); alert(form.elements.test) } </script> </head> <body> <h3>请在IE6与IE7下浏览</h3> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

　　另一个利用IE强大的createElement特征，它能在创建元素的同时，连属性也一起创建。

<!doctype html> <html dir="ltr" lang="zh-CN"> <head> <meta charset="utf-8"/> <title>setAttribute bug By 司徒正美</title> <meta http-equiv="X-UA-Compatible" content="IE=7"> <script type="text/javascript"> window.onload = function(){ var body = document.body; var form = document.createElement("form"); try{ var input = document.createElement("<input type='text' name='test'>"); }catch(e){ var input = document.createElement("input"); input.setAttribute("name", "test") } body.appendChild(form);//注意添加顺序，添加顺序错的话，IE会内存泄漏 form.appendChild(input); alert(form.elements.test) } </script> </head> <body> <h3>请在IE6与IE7下浏览</h3> </body> </html> <br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

（编辑：ASP站长网）