Javascript中document.createElement用法与兼容性(2)_H5之家

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('<BUTTON name=damon type=reset></BUTTON>');
} 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('<BUTTON name=damon type=reset></BUTTON>');
} 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);