我们在使用createElemen方法t创建一个元素节点的时候,似乎在IE下面怎么写都可以,但切换到FF等其它浏览器却总是会报错。

  比如我们要创建一个input元素,那么在IE下,我们可以有多种写法:

要测试某种情况,请将其它情况注释:

<script type="text/javascript">
//第一种,连同属性一起被创建
var x = document.createElement("<input  type='text' size='30' />");
//第二种,以空标签形式创建
var x = document.createElement("<input  />");
//第三种,以tagName形式创建
var x = document.createElement("input ");

document.body.appendChild(x);
</script>

  以上3种方式在IE中均可以通行,然后再非IE核心的浏览器中(如FF,OP,SF等),前2种写法均会报错,无法正确创建这个input元素。

  标准写法为第3种,放之各浏览器而皆准。

  由于在IE中使用createElement方法创建元素节点时,该元素的属性可以一起被创建,但这在其它浏览器中是行不通的,所以我们还得通过其它的方式来创建其属性。

创建一个带属性的元素节点的标准写法:

<script type="text/javascript">
var x = document.createElement("input");
x.setAttribute("type","text");
x.setAttribute("size","30");

document.body.appendChild(x);
</script>

  增加一个属性就document.setAttribute("attribute","value")一次。

  后来发现其实还可以这样来写:

<script type="text/javascript">
var x = document.createElement("input");
x.type = "text";

document.body.appendChild(x);
</script>

  但使用这种来创建属性,好像并不是素所有的属性都能被创建,比如input的size,value,class等用这种方式就无法创建,至于具体原因我还不大清楚。所以推荐使用前面那种写法。

document.createElement方法的使用的更多相关文章

  1. console.log的一个应用 -----用new方法生成一个img对象和document.createElement方法创建一个img对象的区别

    我用两种方法来生成img对象,第一种方法是用new方法,第二种方法是用document.createElement方法. var img1 = new Image(); var img2 = docu ...

  2. JavaScript 覆盖document.createElement 方法 解决window.close在火狐下不兼容问题)

    近期项目遇到了问题,有个asp.net web程序仅仅能在IE7 执行.如今xp都淘汰了,大家都用IE8-IE11,因此这个web app也须要升级 适应全部IE版本号.照成IE版本号不兼容的问题主要 ...

  3. JavaScript 覆盖document.createElement 方法

    最近项目遇到了问题,有个asp.net web程序只能在IE7 运行,现在xp都淘汰了,大家都用IE8-IE11,因此这个web app也需要升级 适应所有IE版本.照成IE版本不兼容的问题主要来致d ...

  4. document.createElement()方法

    document.createElement()是在对象中创建一个对象,主要和appendChild() 方法或者insertBefore() 方法联合使用. appendChild() 方法在节点的 ...

  5. 简化document.createElement("div")动态生成层方法

    我们在WEB开发时,很多时候往往需要我们 JavaScript 来动态建立 html 元素,动态的设置相关的属性.比方说我们想要建立一個 div 层,则可以使用以下代码实现. 一.直接建立functi ...

  6. 摘抄 - 不为人知的JS调用样式的方法---document.createElement().addRule(..)

    很多人可能在调用css样式都是使用传统的方式调用其实有很多方法可以进行调用,如使用内嵌样式,在html直接加入样式,给定外部样式文件,在外部样式文件中使用 @import url(样式文件路径),这些 ...

  7. js document.createElement()的用法 (转)

    document.createElement()的用法 分析代码时,发现自己的盲点--document.createElement(),冲浪一番,总结了点经验. document.createElem ...

  8. document.createElement

    document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合 ...

  9. document.createElement()的用法<> 加强我对陌生代码的理解!

    document.createElement()的用法 分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验. document.createElem ...

随机推荐

  1. hdu 1166 敌兵布阵(线段树详解)

    Problem Description C国的死对头A国这段时间正在进行军事演习,所以C国间谍头子Derek和他手下Tidy又开始忙乎了.A国在海岸线沿直线布置了N个工兵营地,Derek和Tidy的任 ...

  2. ASP.NET 会话状态的模式

    ASP.NET 会话状态为会话数据提供了几个不同的存储选项.每个选项都通过一个 SessionStateMode 枚举值进行识别.如下列表中描述了可用的会话状态模式: InProc 模式:把会话状态存 ...

  3. mxml日期显示使用

    mxml代码: <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx= ...

  4. docker容器和镜像区别

    这篇文章希望能够帮助读者深入理解Docker的命令,还有容器(container)和镜像(image)之间的区别,并深入探讨容器和运行中的容器之间的区别. 当我对Docker技术还是一知半解的时候,我 ...

  5. ubuntu 设置vpn

    百度了资料 http://jingyan.baidu.com/article/fa4125aca7f1b628ad709271.html 1. 设置 VPN CONNECTION 2.configur ...

  6. 获取Excel数据(或部分数据)并导出成txt文本格式

    运行代码前先导入jxl架包,以下代码仅供参考: 测试excel文件(我要获取该excel的内容为省.县.乡.村.组和PH的值): ExcelTest01类代码如下: // 读取Excel的类 impo ...

  7. TextureView+SurfaceTexture+OpenGL ES来播放视频(二)

    引自:http://www.jianshu.com/p/b2d949ab1a1a 在使用OpenGL ES 绘制前,我先概括下接下来要做的工作:我先借用一个博主kiffa举的的一个栗子,我觉得说的恰到 ...

  8. ntp-keygen.c

    这个程序产生加密数据文件使用的的密码,遵循Autokey security protocol和NTPv4.文件名被名字和创建时间组成的头部当做前缀,后面跟有一个类型定义的描述符标签和PEM加密的数据结 ...

  9. POJ 2773 Happy 2006(欧几里德算法)

    题意:给出一个数m,让我们找到第k个与m互质的数. 方法:这题有两种方法,一种是欧拉函数+容斥原理,但代码量较大,另一种办法是欧几里德算法,比较容易理解,但是效率很低. 我这里使用欧几里德算法,欧几里 ...

  10. 把Ubuntu用户目录下的目录名改成英文

    直接改名字是不行的,一重启就回去了 方法一: 把中文文件夹改成相应的英文文件夹,再修改配置文件 ~/.config/user-dirs.dirs XDG_DESKTOP_DIR="$HOME ...