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 相关文章推荐
鼠标事件延时切换插件
Mar 12 Javascript
JavaScript数值转换的三种方式总结
Jul 31 Javascript
javascript实现按回车键切换焦点
Feb 09 Javascript
JS实现网页右侧带动画效果的伸缩窗口代码
Oct 29 Javascript
深入解析JavaScript编程中的this关键字使用
Nov 09 Javascript
Active控件问题小结(附解决办法)
Jun 09 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
微信小程序 常见问题总结(4058,40013)及解决办法
Jan 11 Javascript
分享一道关于闭包、bind和this的面试题
Feb 20 Javascript
微信小程序页面滑动屏幕加载数据效果
Nov 16 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
vue.js实现三级菜单效果
Oct 19 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随机取mysql记录方法小结
2014/12/27 PHP
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
PHP设计模式之工厂方法设计模式实例分析
2018/04/25 PHP
javascript中字符串的定义示例代码
2013/12/19 Javascript
js Object2String方便查看js对象内容
2014/11/24 Javascript
利用CSS3在Angular中实现动画
2016/01/15 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
Ajax异步获取html数据中包含js方法无效的解决方法
2017/02/20 Javascript
微信小程序 支付功能(前端)的实现
2017/05/24 Javascript
详解基于vue的移动web app页面缓存解决方案
2017/08/03 Javascript
p5.js实现斐波那契螺旋的示例代码
2018/03/22 Javascript
微信小程序实现banner图轮播效果
2020/06/28 Javascript
微信小程序 网络通信实现详解
2019/07/23 Javascript
JS中==、===你分清楚了吗
2020/03/04 Javascript
Element Alert警告的具体使用方法
2020/07/27 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
python快速排序代码实例
2013/11/21 Python
python实现删除文件与目录的方法
2014/11/10 Python
python中global用法实例分析
2015/04/30 Python
利用Python如何实现数据驱动的接口自动化测试
2018/05/11 Python
python替换字符串中的子串图文步骤
2019/06/19 Python
Python开发之pip安装及使用方法详解
2020/02/21 Python
python 偷懒技巧——使用 keyboard 录制键盘事件
2020/09/21 Python
CSS3弹性盒模型开发笔记(三)
2016/04/26 HTML / CSS
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
Champion澳大利亚官网:美国冠军运动服装
2018/05/07 全球购物
后勤主管工作职责
2013/12/07 职场文书
考试退步检讨书
2014/01/15 职场文书
事业单位公务员的职业生涯规划
2014/01/15 职场文书
社区端午节活动方案
2014/01/28 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
心得体会的写法
2014/09/05 职场文书
2016读书月活动心得体会
2016/01/14 职场文书
2019年鼓励无偿献血倡议书
2019/09/17 职场文书
python 中[0]*2与0*2的区别说明
2021/05/10 Python
Java Lambda表达式常用的函数式接口
2022/04/07 Java/Android