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 相关文章推荐
URL编码转换,escape() encodeURI() encodeURIComponent()
Dec 27 Javascript
javascript URL锚点取值方法
Feb 25 Javascript
从父页面读取和操作iframe中内容方法
Jul 25 Javascript
Mootools 1.2教程 正则表达式
Sep 15 Javascript
仿新浪微博返回顶部的jquery实现代码
Oct 01 Javascript
javascript使用location.search的示例
Nov 05 Javascript
javascript关于继承的用法汇总
Dec 20 Javascript
jQuery控制Div拖拽效果完整实例分析
Apr 15 Javascript
javascript消除window.close()的提示窗口
May 20 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
JavaScript实现字符串与HTML格式相互转换
Mar 17 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五种设计模式小结
2011/03/23 PHP
ThinkPHP3.1新特性之查询条件预处理简介
2014/06/19 PHP
PHP实现冒泡排序的简单实例
2016/05/26 PHP
Discuz不使用插件实现简单的打赏功能
2019/03/21 PHP
使用prototype.js进行异步操作
2007/02/07 Javascript
jquery1.10给新增元素绑定事件的方法
2014/03/06 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
javascript动态添加删除tabs标签的方法
2015/07/06 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
极力推荐一款小巧玲珑的可视化编辑器bootstrap-wysiwyg
2016/05/27 Javascript
微信小程序 教程之WXSS
2016/10/18 Javascript
实现easyui的datagrid导出为excel的示例代码
2016/11/10 Javascript
javaScript基础详解
2017/01/19 Javascript
深入理解Nodejs Global 模块
2017/06/03 NodeJs
Vue的轮播图组件实现方法
2018/03/03 Javascript
jQuery的ztree仿windows文件新建和拖拽功能的实现代码
2018/12/05 jQuery
使用layui日期控件laydate对开始和结束时间进行联动控制的方法
2019/09/06 Javascript
解决vue scoped scss 无效的问题
2020/09/04 Javascript
利用Vue实现简易播放器的完整代码
2020/12/30 Vue.js
[01:18]DOTA2超级联赛专访hanci ForLove淘汰感言曝光
2013/06/04 DOTA
对pandas中Series的map函数详解
2018/07/25 Python
python矩阵的转置和逆转实例
2018/12/12 Python
pyqt5实现登录界面的模板
2020/05/30 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
Python中字符串List按照长度排序
2019/07/01 Python
用Python配平化学方程式的方法
2019/07/20 Python
PHP统计代码行数的小代码
2019/09/19 Python
详解Python 实现 ZeroMQ 的三种基本工作模式
2020/03/24 Python
如何在django中实现分页功能
2020/04/22 Python
浅谈Html5中视频 音频标签 进度条的问题
2016/07/26 HTML / CSS
编写用C语言实现的求n阶阶乘问题的递归算法
2014/10/21 面试题
财务与信息服务专业推荐信
2013/11/28 职场文书
小学领导班子对照材料
2014/08/23 职场文书
广播体操比赛主持词
2015/06/29 职场文书
小学大队长竞选稿
2015/11/20 职场文书
Redis如何一键部署脚本
2021/04/12 Redis