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 相关文章推荐
ext jquery 简单比较
Apr 07 Javascript
jtable列中自定义button示例代码
Nov 21 Javascript
JavaScript设计模式经典之工厂模式
Feb 24 Javascript
超实用的JavaScript表单代码段
Feb 26 Javascript
BootStrap下jQuery自动完成的样式调整
May 30 Javascript
BootStrap CSS全局样式和表格样式源码解析
Jan 20 Javascript
基于JS代码实现简单易用的倒计时 x 天 x 时 x 分 x 秒效果
Jul 13 Javascript
简单快速的实现js计算器功能
Aug 17 Javascript
Vue实现数字输入框中分割手机号码的示例
Oct 10 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
Feb 03 Javascript
Vue 无限滚动加载指令实现方法
May 28 Javascript
解决layui 三级联动下拉框更新时回显的问题
Sep 03 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 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
2012/12/07 PHP
基于php常用函数总结(数组,字符串,时间,文件操作)
2013/06/27 PHP
php使用反射插入对象示例分享
2014/03/11 PHP
用PHP和Shell写Hadoop的MapReduce程序
2014/04/15 PHP
destoon实现不同会员组公司名称显示不同的颜色的方法
2014/08/22 PHP
拖动一个HTML元素
2006/12/22 Javascript
JQuery Study Notes 学习笔记(一)
2010/08/04 Javascript
浅谈关于JavaScript的语言特性分析
2013/04/11 Javascript
jQuery 全选/反选以及单击行改变背景色实例
2013/07/02 Javascript
JQuery 设置checkbox值二次无效的解决方法
2016/07/22 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
React通过父组件传递类名给子组件的实现方法
2017/11/13 Javascript
Vue框架之goods组件开发详解
2018/01/25 Javascript
JavaScript封装的常用工具类库bee.js用法详解【经典类库】
2018/09/03 Javascript
IE8中jQuery.load()加载页面不显示的原因
2018/11/15 jQuery
微信小程序如何自定义table组件
2019/06/29 Javascript
ES6使用新特性Proxy实现的数据绑定功能实例
2020/05/11 Javascript
Python找出文件中使用率最高的汉字实例详解
2015/06/03 Python
Python爬虫利用cookie实现模拟登陆实例详解
2017/01/12 Python
Python基于递归算法实现的汉诺塔与Fibonacci数列示例
2018/04/18 Python
PyQt5每天必学之事件与信号
2018/04/20 Python
Python实现计算文件MD5和SHA1的方法示例
2019/06/11 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
深入浅析Python 命令行模块 Click
2020/03/11 Python
python递归函数用法详解
2020/10/26 Python
matplotlib对象拾取事件处理的实现
2021/01/14 Python
单位承诺书格式
2014/05/21 职场文书
意向协议书
2015/01/27 职场文书
高中生打架检讨书1000字
2015/02/17 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
2019年度开业庆典祝福语大全!
2019/07/05 职场文书
Python入门之基础语法详解
2021/05/11 Python
如何自己动手写SQL执行引擎
2021/06/02 MySQL
刚学完怎么用Python实现定时任务,转头就跑去撩妹!
2021/06/05 Python
Nginx反向代理、重定向
2022/04/13 Servers
带你了解Java中的ForkJoin
2022/04/28 Java/Android