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 相关文章推荐
js jquery获取随机生成id的服务器控件的三种方法
Jul 11 Javascript
js显示文本框提示文字的方法
May 07 Javascript
详解JavaScript中Hash Map映射结构的实现
May 21 Javascript
纯css下拉菜单 无需js
Aug 15 Javascript
浅谈JavaScript 函数参数传递到底是值传递还是引用传递
Aug 23 Javascript
AngularJS入门教程之多视图切换用法示例
Nov 02 Javascript
jQuery实现删除li节点的方法
Dec 06 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
微信小程序scroll-view横向滑动嵌套for循环的示例代码
Sep 20 Javascript
JS中使用react-tooltip插件实现鼠标悬浮显示框
May 15 Javascript
使用Angular9和TypeScript开发RPG游戏的方法
Mar 25 Javascript
vue实现标签云效果的示例
Nov 09 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 远程关机实现代码
2009/11/10 PHP
php计算几分钟前、几小时前、几天前的几个函数、类分享
2014/04/09 PHP
firefox中用javascript实现鼠标位置的定位
2007/06/17 Javascript
jquery ajax 同步异步的执行示例代码
2010/06/23 Javascript
js 弹出菜单/窗口效果
2011/10/30 Javascript
javascript window.confirm确认 取消对话框实现代码小结
2012/10/21 Javascript
基于JQuery 滑动与动画的说明介绍
2013/04/18 Javascript
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
邮箱下拉自动填充选择示例代码附图
2014/04/03 Javascript
JQuery插件iScroll实现下拉刷新,滚动翻页特效
2014/06/22 Javascript
JavaScript删除数组元素的方法
2015/03/20 Javascript
JavaScript实现将数组数据添加到Select下拉框的方法
2015/08/21 Javascript
使用CoffeeScrip优美方式编写javascript代码
2015/10/28 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
javascript 中Cookie读、写与删除操作
2017/03/29 Javascript
AngularJS双向绑定和依赖反转实例详解
2017/04/15 Javascript
Js实现京东无延迟菜单效果实例(demo)
2017/06/02 Javascript
详解React Native网络请求fetch简单封装
2017/08/10 Javascript
解决webpack+Vue引入iView找不到字体文件的问题
2018/09/28 Javascript
vue-video-player 解决微信自动全屏播放问题(横竖屏导致样式错乱问题)
2020/02/25 Javascript
vue 出现data-v-xxx的原因及解决
2020/08/04 Javascript
Python读取mp3中ID3信息的方法
2015/03/05 Python
使用Python导出Excel图表以及导出为图片的方法
2015/11/07 Python
在Python中os.fork()产生子进程的例子
2019/08/08 Python
如何在python开发工具PyCharm中搭建QtPy环境(教程详解)
2020/02/04 Python
Python如何省略括号方法详解
2020/03/21 Python
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
ShellScript面试题一则-ShellScript编程
2014/03/05 面试题
工程项目建议书范文
2014/03/12 职场文书
大学竞选班长演讲稿
2014/04/24 职场文书
学校欢迎标语
2014/06/18 职场文书
六一儿童节标语
2014/10/08 职场文书
幼儿园五一劳动节活动总结
2015/02/09 职场文书
推普标语口号大全
2015/12/26 职场文书
2016年幼儿园教研活动总结
2016/04/05 职场文书
SpringBoot详解执行过程
2022/07/15 Java/Android