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 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
JavaScript之编码规范 推荐
May 23 Javascript
form表单action提交的js部分与html部分
Jan 07 Javascript
node.js中的forEach()是同步还是异步呢
Jan 29 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
thinkjs之页面跳转同步异步操作
Feb 05 Javascript
Ionic + Angular.js实现验证码倒计时功能的方法
Jun 12 Javascript
Nuxt页面级缓存的实现
Mar 09 Javascript
在vue项目中 实现定义全局变量 全局函数操作
Oct 26 Javascript
微信小程序实现多行文字滚动
Nov 18 Javascript
关于对TypeScript泛型参数的默认值理解
Jul 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加密函数 Javascript/Js 解密函数
2013/09/23 PHP
Codeigniter中禁止A Database Error Occurred错误提示的方法
2014/06/12 PHP
PHP实现QQ快速登录的方法
2016/09/28 PHP
PHP Socket网络操作类定义与用法示例
2017/08/30 PHP
CentOS7编译安装php7.1的教程详解
2019/04/18 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
TP框架实现上传一张图片和批量上传图片的方法分析
2020/04/23 PHP
JS简单实现元素复制示例附图
2013/11/19 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
想学习javascript JS和jQuery哪个重要 先学哪个
2016/12/11 Javascript
seajs模块压缩问题与解决方法实例分析
2017/10/10 Javascript
详解webpack编译多页面vue项目的配置问题
2017/12/11 Javascript
layui使用templet格式化表格数据的方法
2019/09/16 Javascript
vant 解决tab切换插件标题样式自定义的问题
2020/11/13 Javascript
[01:35]2014DOTA2西雅图邀请赛 专访狐狸妈青春献给刀塔
2014/07/08 DOTA
Python去除字符串两端空格的方法
2015/05/21 Python
python 批量修改/替换数据的实例
2018/07/25 Python
Python读取excel中的图片完美解决方法
2018/07/27 Python
mac PyCharm添加Python解释器及添加package路径的方法
2018/10/29 Python
实例讲解Python脚本成为Windows中运行的exe文件
2019/01/24 Python
Python爬取破解无线网络wifi密码过程解析
2019/09/17 Python
python可视化实现KNN算法
2019/10/16 Python
Python调用scp向服务器上传文件示例
2019/12/22 Python
TensorFlow自定义损失函数来预测商品销售量
2020/02/05 Python
Python操作Sqlite正确实现方法解析
2020/02/05 Python
使用TensorFlow直接获取处理MNIST数据方式
2020/02/10 Python
python实现读取类别频数数据画水平条形图案例
2020/04/24 Python
用python给csv里的数据排序的具体代码
2020/07/17 Python
Shopping happy life西班牙:以最优惠的价格提供最好的时尚配饰
2020/03/13 全球购物
杭州联环马网络笔试题面试题
2013/08/04 面试题
2014年道德讲堂实施方案
2014/03/05 职场文书
运动会开幕式主持词
2014/03/28 职场文书
实习生岗位职责
2014/04/12 职场文书
基层党建工作宣传标语
2014/06/24 职场文书
2015年安全生产目标责任书
2015/01/29 职场文书