document.createElement()用法及注意事项(ff下不兼容)


Posted in Javascript onMarch 13, 2013

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

var inputObj    = document.createElement

     ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;' " readonly >");

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

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

<div id="board"></div>

<script type="text/javascript">

<!--

var board = document.getElementById("board");

var e = document.createElement("input");

e.type = "radio"; //紧接着上一行写

var obj = board.appendChild(e);

obj.checked = true;

//如下写法也是正确的:

//e.checked = true;

-->

</script>

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

IE 创建元素,还有一个特点,就是可以连同属性一同创建,比如:var e = document.createElement("<input type='radio' name='r' value='1' />"); 这在其它浏览器中是不行的,所以我们也不支持。

总结:

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

•除了 input 元素的 type 属性写在显示元素(insertBefore 或 appendChild)之前外,其它属性都写在显示元素之后。
•改变属性时,对写在显示元素(insertBefore 或 appendChild)之前的用 createElement 的返回值,对写在显示元素之后的用 insertBefore 或 appendChild 的返回值。

1.var echkbox=document.createElement("input");    

2.echkbox.setAttribute("type","checkbox");    

3.echkbox.setAttribute("id","inputid");    

4.echkbox.setAttribute("name","inputname");    

5.echkbox.setAttribute("value","inputvalue");    

6.var addhere=document.getElementById("someElementId");    

7.addhere.appendChild(echkbox);    

8.echkbox.setAttribute("checked","checked");    

9.alert(document.getElementById("inputid").checked);

<!--document方法:
getElementById(id)                            返回指定结点的引用
getElementsByTagName(name)       返回文档中所有匹配的元素的集合
createElement(name)                         创建指定类型的新结点
createTextNode(text)                         创建一个纯文本结点
element方法:
getAttribute(id)                                   返回指定属性的值
setAttribute(id,value)                         给属性赋值
removeAttribute(id)                           移除指定属性和它的值
getElementsByTagName(name)       返回结点内所有匹配的元素的集合
node方法:
appendChild(child)                             给指定结点添加一个新的子结点
removeChild(child)                             移除指定结点的子结点
replaceChild(newChild,oldChild)       替换指定结点的子结点
insertBefore(newChild,refChild)       在同一层级的结点前面插入新结点
hasChildNodes()                                 如果结点有子结点则返回true
node属性:
nodeName                                         以字符串的格式存放结点的名称
nodeType                                           以整型数据格式存放结点的类型
nodeValue                                          以可用的格式存放结点的值
parentNode                                        指向结点的父结点的引用
childNodes                                         指向子结点的引用的集合
firstChild                                            指向子结点结合中的第一个子结点的引用
lastChild                                             指向子结点结合中的最后一个子结点的引用

动态加载js

var Rash=true; 

var msg=""; 

function norash() 

{ 

   if (confirm("确定要取消吗")) 

   Rash=false; 

} 

function rashit() 

{ 

    setInterval('getrss()',Inttime); 

} 

function getrss() 

{ 

if (Rash==true) 

{ 

     head=document.getElementsByTagName('head').item(0); 

    script=document.createElement('script'); 

    script.src='INCLUDE/AutoUpdate.asp'; 

   script.type='text/javascript'; 

   script.defer=true; 

   void(head.appendChild(script)); 

   window.status=msg; 

   } 

} 

rashit();
Javascript 相关文章推荐
javascript模仿msgbox提示效果代码
Jun 10 Javascript
使用javascript获取flash加载的百分比的实现代码
May 25 Javascript
javascript dom追加内容实现示例
Sep 21 Javascript
Node.js中的缓冲与流模块详细介绍
Feb 11 Javascript
JavaScript对表格或元素按文本,数字或日期排序的方法
May 26 Javascript
详细分析JavaScript函数定义
Jul 16 Javascript
JS实现横向与竖向两个选项卡Tab联动的方法
Sep 27 Javascript
基于javascript实现九宫格大转盘效果
May 28 Javascript
Angular的$http的ajax的请求操作(推荐)
Jan 10 Javascript
js统计页面上每个标签的数量实例代码
May 29 Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 Javascript
Angular使用Restful的增删改
Dec 28 Javascript
document.createElement()用法
Mar 13 #Javascript
js获得鼠标的坐标值的方法
Mar 13 #Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 #Javascript
九种js弹出对话框的方法总结
Mar 12 #Javascript
瀑布流布局并自动加载实现代码
Mar 12 #Javascript
JavaScript中数组对象的那些自带方法介绍
Mar 12 #Javascript
P3P Header解决Cookie跨域的问题
Mar 12 #Javascript
You might like
PHP开发中常用的三个表单验证函数使用小结
2010/03/03 PHP
php date()日期时间函数详解
2010/05/16 PHP
PHP随手笔记整理之PHP脚本和JAVA连接mysql数据库
2015/11/25 PHP
PHP导出Excel实例讲解
2016/01/24 PHP
PHP receiveMail实现收邮件功能
2018/04/25 PHP
拖动一个HTML元素
2006/12/22 Javascript
用jQuery简化JavaScript开发分析
2009/02/19 Javascript
javascript 设置某DIV区域内的checkbox复选框
2009/11/30 Javascript
简单实用jquery版三级联动select示例
2013/07/04 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
chrome下jq width()方法取值为0的解决方法
2014/05/26 Javascript
JS循环遍历JSON数据的方法
2014/07/08 Javascript
省市区三级联动下拉框菜单javascript版
2015/08/11 Javascript
Vue.js鼠标悬浮更换图片功能
2017/05/17 Javascript
vue+vuecli+webpack中使用mockjs模拟后端数据的示例
2017/10/24 Javascript
详解使用React全家桶搭建一个后台管理系统
2017/11/04 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
完美解决vue 中多个echarts图表自适应的问题
2020/07/19 Javascript
[01:25:09]2014 DOTA2国际邀请赛中国区预选赛 5 23 CIS VS DT第二场
2014/05/24 DOTA
[05:39]2014DOTA2国际邀请赛 DK晋级胜者组专访战队国士无双
2014/07/14 DOTA
py2exe 编译ico图标的代码
2013/03/08 Python
Python爬虫实例爬取网站搞笑段子
2017/11/08 Python
详解python OpenCV学习笔记之直方图均衡化
2018/02/08 Python
python删除某个字符
2018/03/19 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python Django里CSRF 对应策略详解
2019/08/05 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
Django restframework 框架认证、权限、限流用法示例
2019/12/21 Python
postman和python mock测试过程图解
2020/02/22 Python
Python中return函数返回值实例用法
2020/11/19 Python
菲律宾最大的网上花店和礼品店:PhilFlower.com
2018/02/09 全球购物
统计学专业毕业生的自我评价分享
2013/11/28 职场文书
大学生2014全国两会学习心得体会
2014/03/10 职场文书
经营目标管理责任书
2014/07/25 职场文书
运动会新闻稿
2015/07/17 职场文书
退休劳动合同怎么写?
2019/10/25 职场文书