Javascript中document.createElement用法与兼容性

W3C DOM Level2 Core规定，Document 接口下的 createElement 方法可以创建一个元素节点对象实例。它可以传入一个字符串参数 tagName，在 HTML 中，这个参数可以是任何形式，但tagName 应为一个合法的标签名。

例如：document.createElement("td");//创建一个td

若 tagName 中出现不合法的字符，则应抛出 INVALID_CHARACTER_ERR 异常。

由于微软的强大，其产品IE使用了一些规范以外的规则，其中之一就与createElement方法有关。即：在 IE 中，createElement 方法不仅可以通过合法的标签名创建节点对象，还可以通过传入一段合法的 HTML 代码字符串作为参数创建节点对象。

例如：document.createElement("");//创建一个name属性为"txtName"的input

若使用了 IE 特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数创建节点对象的方法，则在其他浏览器中将会抛出异常，并导致后续代码无法执行。这就造成了浏览器的兼容性问题。

也许有的读者会说，用 createElement 方法时，使用传入标签名的做法不就解决了兼容性问题吗？

例如：

但在 IE6 , IE7 中，如果动态生成 input 元素，是无法为其设置 name 属性的，这是IE自身的问题。这个时候，IE 特有的通过为 createElement 传入一段合法的 HTML 代码字符串作为参数创建节点对象的方法，就有了大显身手的机会。不过，IE 中无法为 input 设置 name 属性的 bug 已经在 IE8 中被修复。在其他浏览器中，不存在上述问题。

所以，要最终解决 createElement 方法的兼容性问题，还是要注意判断浏览器，针对 IE 可以使用其特有的通过为createElement 传入一段合法的 HTML 代码字符串作为参数的方法，非 IE 浏览器仍然使用 W3C 规范的标准方法。

例如：

document.createElement()用法及注意事项 .

今天处理了一个日期选择器的ie和ff的兼容问题，本来这种情况就很难找错误，找了好久才把错误定位到js中创建元素的方法document.createElement()，这个方法在ie下支持这样创建元素

但是这样的情况在ff下是不兼容的。
还有就是特别注意input元素的创建：与 input 有关的元素有很多，比如：checkbox、radio、submit、reset...，因此创建 input 是个很特殊的用法。

创建不同的 input 正确的做法是：

针对 input，在 Netscape、Opera 和 Firefox 中 e.type 既可以在 appendChild 之前，也可以在其之后。但在 IE 中 type 属性必须在前，其它属性必须在后。

IE 创建元素，还有一个特点，就是可以连同属性一同创建，比如：var e = document.createElement(""); 这在其它浏览器中是不行的，所以我们也不支持。

总结：

•针对非 input 元素，各浏览器中，既可以把对元素属性的改变写在显示元素（insertBefore 或 appendChild）之前，也可以在其后。
•针对 input 元素，为了兼容 IE，type 属性写在显示元素（insertBefore 或 appendChild）之前，其它属性写在其后。

实例(兼容性)

document.createElement创建的的type属性为只读

测试代码中避开了type的默认值，因为

的type属性在IE下的默认值是button，而在其他浏览器默认是submit 。我们平时在使用时，建议显式的声明type属性。

Always specify the type attribute for the button. The default type for Internet Explorer is “button”, while in other browsers (and in the W3C specification) it is “submit”.

代码如下

复制代码

// 创建input var iptEl = document.createElement('input'); iptEl.type = 'password'; // 避免默认值 iptEl.name = 'damon'; document.body.appendChild(iptEl); // 创建button var btnEl = document.createElement('button'); btnEl.type = 'reset'; // IE下这里报错了 btnEl.name = 'damon'; document.body.appendChild(btnEl); alert(document.getElementsByTagName('input')[0].type +','+ document.getElementsByTagName('button')[0].type);

如下图所示

浏览器
IE 6	Yes	No
IE 7	Yes	No
IE 8	Yes	No
IE 9	Yes	Yes
Firefox 4.0	Yes	Yes
Chrome 13(DEV)	Yes	No
Safari 5	Yes	No
Opera 11	Yes	Yes

从测试结果可以看到，并无此问题。

解决方案
MSDN有一段说明:

As of Microsoft Internet Explorer 5, the type property is read/write-once, but only when an input element is created with the createElement method and before it is added to the document.
即只有document.createElement创建的input元素，在其增加到DOM树之前允许对type属性进行一次更改。但从实际情况来看并非如此，这个仅有的一次设置type的机会在创建时就用掉了。从上面的测试结果看，这个问题直到IE9才修复。

针对IE，document.createElement(tag)中，tag可以是带有属性的字符串，创建时即将type和name写上即可。

Attributes can be included with the sTag as long as the entire string is valid HTML.
对其他的现代浏览器(Chrome、Safari等)使用setAttribute即可，或者使用document.createAttribute创建属性节点，再通过setAttributeNode加到元素节点上。

方法一：

代码如下	复制代码
var btnEl; try { btnEl = document.createElement(''); } catch(e){} if(! btnEl) { btnEl = document.createElement('button'); btnEl.setAttribute('type', 'reset'); btnEl.setAttribute('name', 'damon'); } document.body.appendChild(btnEl); alert(document.getElementsByTagName('button')[0].type +','+ document.getElementsByTagName('button')[0].name);

方法二：

代码如下

复制代码

var btnEl; try { btnEl = document.createElement(''); } catch(e){} if(! btnEl) { btnEl = document.createElement('button'); var aType = document.createAttribute('type'); var aName = document.createAttribute('name'); aType.value = 'reset'; aName.value = 'damon'; btnEl.setAttributeNode(aType); btnEl.setAttributeNode(aName); } document.body.appendChild(btnEl); alert(document.getElementsByTagName('button')[0].type +','+ document.getElementsByTagName('button')[0].name);

相关文章

• 王者荣耀侦探能力大测试攻略 王者荣耀侦探能力大测试怎么过 11-22
• 无期迷途主线前瞻兑换码是什么 11-22
• 原神欧洛伦怎么培养 11-22
• 炉石传说网易云音乐联动怎么玩 11-22
• 永劫无间手游确幸转盘怎么样 11-22
• 无期迷途主线前瞻兑换码是什么 无期迷途主线前瞻直播兑换码介绍 11-22