我们在使用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. how to increase an regular array length in java?

    Arrays in Java are of fixed size that is specified when they are declared. To increase the size of t ...

  2. angular、bootstrap初稿搭建

    1.bootstrap3.0中,ie8不兼容响应式设计 @media,需要添加如下2个查件 <!-- html5.js for IE less than 9 -->     <!-- ...

  3. Spring Security-用户密码自定义加密

    public class SunPasswordEncoder implements PasswordEncoder{ //@实现加密的方法,既将明文转换为密文的方法 public String en ...

  4. SQL 比较中文字符串

    /* declare @str1 varchar(200),@str2 varchar(200) set @str1=N'江西省南昌市其它区高新区火炬大道809号' set @str2=N'江西省南昌 ...

  5. ibatis resultMap 结果集映射

    1.结果集映射 就是将返回的记录,逐个字段映射到java对象上:如果数据库字段与java对象的成员变量名对应的话,则使用resultClas即可 2.实现 结合 ibatis初探这篇文章中提到的pro ...

  6. php UNIX时间戳转换为指定日期格式

    用函数: date() 一般形式:date('Y-m-d H:i:s', unix时间) $date_unix=time();//获取当前时间,unix时间戳 echo 'Unix时间:'.$date ...

  7. 全文检索工具推荐FileLocator

    全文检索工具推荐FileLocator https://www.baidu.com/link?url=_vaDZaJ_OePrAX-BTUD5hjTymnvN7_1oIAnWyS25hqxAg0nUH ...

  8. SQL Server 2008 2005删除或压缩数据库日志的方法

    由于数据库日志增长被设置为“无限制”,所以时间一长日志文件必然会很大,一个400G的数据库居然有600G的LOG文件,严重占用了磁盘空间.由于主要是做OLAP,所以数据库本身不会有大变动,所以日志也就 ...

  9. XAMPP(v1.83)中的PHP(v5.5.15)访问SQLServer2014

    驱动安装: 1. 下载SQLServer的微软官方PHP驱动,http://msdn.microsoft.com/en-us/sqlserver/ff657782.aspx 2. 安装SQLSRV31 ...

  10. php 四种基础算法 ---- 插入排序法

    3.插入排序法 插入排序法思路:将要排序的元素插入到已经 假定排序号的数组的指定位置. 代码: function insert_sort($arr) {    //区分 哪部分是已经排序好的    / ...