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 相关文章推荐
12个非常有创意的JavaScript小游戏
Mar 18 Javascript
javaScript 删除字符串空格多种方法小结
Oct 24 Javascript
结合JQ1.9通过js正则判断各种浏览器版本的方法
Dec 30 Javascript
jquery easyui 结合jsp简单展现table数据示例
Apr 18 Javascript
JavaScript中的console.log()函数详细介绍
Dec 29 Javascript
使用AngularJS和PHP的Laravel实现单页评论的方法
Jun 19 Javascript
jQuery异步提交表单的两种方式
Sep 13 Javascript
微信小程序 教程之列表渲染
Oct 18 Javascript
通过js修改input、select默认字体颜色
Apr 19 Javascript
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
JS+html5实现异步上传图片显示上传文件进度条功能示例
Nov 09 Javascript
jquery获取input输入框中的值
Nov 13 jQuery
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&amp;mysql(六)
2006/10/09 PHP
PHP 模板高级篇总结
2006/12/21 PHP
php采集中国代理服务器网的方法
2015/06/16 PHP
PHP中Http协议post请求参数
2015/11/02 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php 的多进程操作实践案例分析
2020/02/28 PHP
Js点击弹出下拉菜单效果实例
2013/08/12 Javascript
js,jquery滚动/跳转页面到指定位置的实现思路
2014/06/03 Javascript
jQuery实现HTML表格单元格的合并功能
2016/04/06 Javascript
js实现刷新页面后回到记录时滚动条的位置【两种方案可选】
2016/12/12 Javascript
Angularjs在360兼容模式下取数据缓存问题的解决办法
2017/06/22 Javascript
js编写简单的计时器功能
2017/07/15 Javascript
es6+angular1.X+webpack 实现按路由功能打包项目的示例
2017/08/16 Javascript
phantomjs导出html到pdf的方法总结
2017/10/19 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
2018/06/05 Javascript
python实现对指定输入的字符串逆序输出的6种方法
2018/04/26 Python
浅谈python 读excel数值为浮点型的问题
2018/12/25 Python
python redis 删除key脚本的实例
2019/02/19 Python
详解Python:面向对象编程
2019/04/10 Python
python实现ip代理池功能示例
2019/07/05 Python
Python+pyplot绘制带文本标注的柱状图方法
2019/07/08 Python
python pyqtgraph 保存图片到本地的实例
2020/03/14 Python
Python文件名匹配与文件复制的实现
2020/12/11 Python
加拿大百叶窗和窗帘定制网站:Blinds
2017/01/30 全球购物
美国畅销的跑步机品牌:ProForm
2017/02/06 全球购物
Nordgreen美国官网:在线购买极简主义斯堪的纳维亚手表
2019/07/24 全球购物
Antler英国官网:购买安特丽行李箱、拉杆箱
2019/08/25 全球购物
路由表示做什么用的?在linux环境中怎么来配置一条默认路由?
2013/06/07 面试题
高中班长自我鉴定
2013/12/20 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
齐云山导游词
2015/02/06 职场文书
2016年第十四个公民道德宣传日活动总
2016/04/01 职场文书
2019新员工心得体会
2019/06/25 职场文书
Mysql服务添加 iptables防火墙策略的方案
2021/04/29 MySQL
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL
零基础学java之循环语句的使用
2022/04/10 Java/Android