innerHTML和cloneNode表现的很不好
有时候需要把表单里的元素复制出来,这里有两个方法,一是先去innerHTML,然后在innerHTML到其他的地方;二是cloneNode(true)出来到其他地方,但是这个两个方法在各个浏览器仅仅是对普通的表单的元素都是支持不完善的,甚至IE自己的系列都有变化。
以下是支持列表,yes表示会把值复制出来,no表示不会。其实还有包括表单元素的自定义属性,事件等也是各有千秋,我实在是懒得列举。
innerHTML | IE6 | IE7 | IE8 | FF | Chrome |
input[text] | yes | yes | yes | no | no |
input[checkbox] | yes | yes | no | no | no |
input[radio] | yes | yes | no | no | no |
select | yes | yes | yes | no | no |
textarea | yes | yes | yes | no | no |
cloneNode | IE6 | IE7 | IE8 | FF | Chrome |
input[text] | yes | yes | yes | yes | yes |
input[checkbox] | no | no | no | yes | yes |
input[radio] | no | no | no | yes | yes |
select | no | no | no | no | no |
textarea | yes | yes | yes | no | no |
解决上面的最保险的方法是对每一个元素类似这样:
var aClone = dClone.getElementsByTagName(‘SELECT’);
var aSelect = dSelect.getElementsByTagName(‘SELECT’);
if( aClone.length > 0 && aClone.length == aSelect.length ){
for( var i = 0, len = aClone.length; i < len; i++ ){
aClone[i].selectedIndex = aSelect[i].selectedIndex;
};
}
随即,附送美图一张:
点击小图看大图,这次outing最欢畅的就是住五星,很豪华很奢侈!