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 相关文章推荐
js DataSet数据源处理代码
Mar 29 Javascript
打开新窗口关闭当前页面不弹出关闭提示js代码
Mar 18 Javascript
JavaScript 操作table,可以新增行和列并且隔一行换背景色代码分享
Jul 05 Javascript
正则表达式优化JSON字符串的技巧
Dec 24 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
JavaScript ES6中CLASS的使用详解
Nov 22 Javascript
jquery 手势密码插件
Mar 17 Javascript
原生JS实现瀑布流插件
Feb 06 Javascript
用Node编写RESTful API接口的示例代码
Jul 04 Javascript
探秘vue-rx 2.0(推荐)
Sep 21 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
Apr 07 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
Breeze 文章管理系统 v1.0.0正式发布
2006/12/14 PHP
基于PHP读取csv文件内容的详解
2013/06/18 PHP
Windows和Linux中php代码调试工具Xdebug的安装与配置详解
2014/05/08 PHP
PHP保存带BOM文件的方法
2015/02/12 PHP
php使用explode()函数将字符串拆分成数组的方法
2015/02/17 PHP
php定义参数数量可变的函数用法实例
2015/03/16 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
js之WEB开发调试利器:Firebug 下载
2007/01/13 Javascript
Javascript 日期处理之时区问题
2009/10/08 Javascript
js控制分页打印、打印分页示例
2014/02/08 Javascript
JS获取当前日期时间并定时刷新示例
2021/03/04 Javascript
让html页面不缓存js的实现方法
2014/10/31 Javascript
轻松创建nodejs服务器(6):作出响应
2014/12/18 NodeJs
JavaScript中的方法调用详细介绍
2014/12/30 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JavaScript判断表单为空及获取焦点的方法
2016/02/12 Javascript
js控制div层的叠加简单方法
2016/10/15 Javascript
基于jQuery实现Accordion手风琴自定义插件
2020/10/13 Javascript
Avalonjs 实现简单购物车功能(实例代码)
2017/02/07 Javascript
Angularjs中使用轮播图指令swiper
2017/05/30 Javascript
vue router路由嵌套不显示问题的解决方法
2017/06/17 Javascript
在小程序中使用Echart图表的示例代码
2018/08/02 Javascript
微信小程序滑动选择器的实现代码
2018/08/10 Javascript
vue中使用cookies和crypto-js实现记住密码和加密的方法
2018/10/18 Javascript
vue-cli 打包后提交到线上出现 &quot;Uncaught SyntaxError:Unexpected token&quot; 报错
2018/11/06 Javascript
详解Vue 如何监听Array的变化
2019/06/06 Javascript
[08:47]2018国际邀请赛 OG战队举杯时刻
2018/08/29 DOTA
基于python3 类的属性、方法、封装、继承实例讲解
2017/09/19 Python
Python函数参数操作详解
2018/08/03 Python
python 处理数字,把大于上限的数字置零实现方法
2019/01/28 Python
Python几种常见算法汇总
2020/06/02 Python
Canal官网:巴西女性时尚品牌
2019/10/16 全球购物
采购部部门职责
2013/12/15 职场文书
2015年敬老月活动总结
2015/03/27 职场文书
大国崛起日本观后感
2015/06/02 职场文书
Python 全局空间和局部空间
2022/04/06 Python