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 相关文章推荐
Ext 表单布局实例代码
Apr 30 Javascript
jQuery 学习第六课 实现一个Ajax的TreeView
May 17 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
简介JavaScript中的getUTCFullYear()方法的使用
Jun 10 Javascript
异步加载JS、CSS代码(推荐)
Jun 15 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
Aug 19 Javascript
jQuery实现对象转为url参数的方法
Jan 11 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
jQuery完成表单验证的实例代码(纯代码)
Sep 30 jQuery
vue2.0 常用的 UI 库实例讲解
Dec 12 Javascript
Vue组件为什么data必须是一个函数
Jun 11 Javascript
JavaScript 如何计算文本的行数的实现
Sep 14 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
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
Laravel框架学习笔记(二)项目实战之模型(Models)
2014/10/15 PHP
Laravel学习教程之路由模块
2017/08/18 PHP
PHP设计模式之适配器模式(Adapter)原理与用法详解
2019/12/12 PHP
用js重建星际争霸
2006/12/22 Javascript
我的NodeJs学习小结(一)
2014/07/06 NodeJs
jquery单击事件和双击事件冲突解决方案
2016/03/02 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
微信小程序 wxapp画布 canvas详细介绍
2016/10/31 Javascript
详解微信小程序 登录获取unionid
2017/06/27 Javascript
JS全角与半角转化实例(分享)
2017/07/04 Javascript
ReactNative中使用Redux架构总结
2017/12/15 Javascript
解决LayUI表单获取不到data的问题
2018/08/20 Javascript
JavaScript命名空间模式实例详解
2019/06/20 Javascript
nodejs的安装使用与npm的介绍
2019/09/11 NodeJs
Python编程之属性和方法实例详解
2015/05/19 Python
Python中__init__.py文件的作用详解
2016/09/18 Python
windows系统下Python环境的搭建(Aptana Studio)
2017/03/06 Python
python中闭包Closure函数作为返回值的方法示例
2017/12/17 Python
Python3多进程 multiprocessing 模块实例详解
2018/06/11 Python
Python3+Appium安装使用教程
2019/07/05 Python
python 同时读取多个文件的例子
2019/07/16 Python
Django 实现图片上传和显示过程详解
2019/07/18 Python
python 中xpath爬虫实例详解
2019/08/26 Python
python实现截取屏幕保存文件,删除N天前截图的例子
2019/08/27 Python
Django def clean()函数对表单中的数据进行验证操作
2020/07/09 Python
Python try except finally资源回收的实现
2021/01/25 Python
CSS超出文本指定宽度用省略号代替和文本不换行
2016/05/05 HTML / CSS
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Html5 canvas画图白板踩坑
2020/06/01 HTML / CSS
柏林通行证:Berlin Pass
2018/04/11 全球购物
公司募捐倡议书
2014/05/14 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
乡村教师党员四风问题对照检查材料思想汇报
2014/10/08 职场文书
2015年幼儿园学期工作总结
2015/05/22 职场文书
利用Pycharm连接服务器的全过程记录
2021/07/01 Python