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

document.createElement创建的<button>，即使不追加到DOM树中，在IE中也不能修改其type属性和button属性，其他浏览器设置也可能不生效。

测试代码

测试代码中避开了type的默认值，因为<button>的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);

测试结果

各浏览器对document.createElement元素的type属性修改的测试

浏览器	<input>	<button>
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

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

解决方案

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);