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 相关文章推荐
HTML-CSS群中单选引发的“事件”
Mar 05 Javascript
js Math 对象的方法
Sep 01 Javascript
JQuery实现鼠标滑过显示导航下拉列表
Sep 12 Javascript
JQuery打造省市下拉框联动效果
May 18 Javascript
jQuery实现弹出窗口中切换登录与注册表单
Jun 05 Javascript
js中 javascript:void(0) 用法详解
Aug 11 Javascript
jquery实现弹出层登录和全屏层注册特效
Aug 28 Javascript
jQuery 操作input中radio的技巧
Jul 18 Javascript
Vue应用部署到服务器的正确方式
Jul 15 Javascript
JavaScript中var、let、const区别浅析
Jun 24 Javascript
Layui数据表格之单元格编辑方式
Oct 26 Javascript
详解node.js创建一个web服务器(Server)的详细步骤
Jan 15 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/08/08 PHP
php中实现记住密码下次自动登录的例子
2014/11/06 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
PHP strip_tags() 去字符串中的 HTML、XML 以及 PHP 标签的函数
2016/05/22 PHP
php中关于长度计算容易混淆的问题分析
2016/05/27 PHP
PHP入门教程之字符串处理技巧总结(转换,过滤,解析,查找,截取,替换等)
2016/09/11 PHP
Laravel框架路由和控制器的绑定操作方法
2018/06/12 PHP
5 cool javascript apps
2007/03/24 Javascript
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
Javascript基于对象三大特性(封装性、继承性、多态性)
2016/01/04 Javascript
Js遍历键值对形式对象或Map形式的方法
2016/08/08 Javascript
jquery 手势密码插件
2017/03/17 Javascript
Mongoose经常返回e11000 error的原因分析
2017/03/29 Javascript
详解在vue-cli中使用路由
2017/09/25 Javascript
Vue-cli 使用json server在本地模拟请求数据的示例代码
2017/11/02 Javascript
微信小程序页面跳转功能之从列表的item项跳转到下一个页面的方法
2017/11/27 Javascript
JavaScript callback回调函数用法实例分析
2018/05/08 Javascript
jQuery实现参数自定义的文字跑马灯效果
2018/08/15 jQuery
利用Vue构造器创建Form组件的通用解决方法
2018/12/03 Javascript
JS算法教程之字符串去重与字符串反转
2020/12/15 Javascript
在Python中操作字符串之rstrip()方法的使用
2015/05/19 Python
django 环境变量配置过程详解
2019/08/06 Python
使用keras和tensorflow保存为可部署的pb格式
2020/05/25 Python
浅析Python 多行匹配模式
2020/07/24 Python
python获取天气接口给指定微信好友发天气预报
2020/12/28 Python
python源文件的字符编码知识点详解
2021/03/04 Python
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
泰国健康和美容服务预订网站:GoWabi
2019/06/03 全球购物
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
Java平台和其他软件平台有什么不同
2015/06/05 面试题
如何实现一个自定义类的序列化
2012/05/22 面试题
护理自荐信范文
2013/10/05 职场文书
2014年学校国庆主题活动方案
2014/09/16 职场文书
2014年幼儿园工作总结
2014/11/10 职场文书
小学德育工作总结2015
2015/05/12 职场文书
SQL注入篇学习之盲注/宽字节注入
2022/03/03 MySQL