js创建兼容IE和firefox的DOM

来源:互联网 发布:java方法重载注意 编辑:程序博客网 时间:2024/06/06 05:19

我们都知道在IE中创建表单元素可以有三种方式

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國var oInput = document.createElement("input");
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國
var oInput = document.createElement("<input />");
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國
var oInput = document.createElement("<input name='' />");

    在Firefox里面仅支持

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國var oInput = document.createElement("input");


    想要兼容IE/Firefox动态创建radio button元素可以这样写:

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國function createRadio(name,id,value,isChecked)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
var oRadio = null;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
if(isIE)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio 
= document.createElement("<input name='" + name + (isChecked ? "' checked='"+ isChecked +"'/>" : "' />"));
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.id 
= id;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.type 
= "radio";
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.value 
= value;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    }

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
else
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio 
= document.createElement("input");
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.setAttribute(
"type","radio");
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.setAttribute(
"id",id);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.setAttribute(
"name",name);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        oRadio.setAttribute(
"value",value);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        
if(isChecked)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國       
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國            oRadio.setAttribute(
"checked",isChecked);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        }
        
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    }

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
return oRadio;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國}

    延伸一下,动态创建input任意元素代码片段如下即可:

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國function createElement(tagName,name,type,value)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
var element = null;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
try 
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element 
= document.createElement('<'+tagName+' name="'+name+'" />');
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element.type 
= type;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element.value 
= value;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    }

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
catch (e)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    }

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
if (!element)
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國    
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國{
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element 
= document.createElement(tagName);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element.setAttribute(
"type",type);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element.setAttribute(
"name",name);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國        element.setAttribute(
"value",value);
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國   }

js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國   
return element;
js创建兼容IE和firefox的DOM - ぜ墮落帝國 - ぜ墮落帝國}

http://blog.163.com/baibing5411/blog/static/2690843120096702848694/