document.createElement方法的使用

我们在使用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等用这种方式就无法创建,至于具体原因我还不大清楚。所以推荐使用前面那种写法。

时间: 2024-08-29 17:05:57

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

JavaScript 覆盖document.createElement 方法

题:软件项目报价方法 广告:========================================================== 欢迎使用[豆瓣读书] 管理你的阅读,查阅书评,编写读书笔记等. ^^ app下载:http://itunes.apple.com/cn/app/id695492935 ================================================================= 软件项目一般包括解决方案.开发.维护.系统集成等.以下

document.createElement()的用法

今天做项目需要做个添加地址栏和前面需要一个按钮,就看到了这篇文章! document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"><

javascript 中 document.createElement()的用法

分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验. document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="

document.createElement()的用法&lt;&gt; 加强我对陌生代码的理解!

document.createElement()的用法 分析代码时,发现自己的盲点——document.createElement(),冲浪一番,总结了点经验. document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.cre

JS中document.createElement()用法及注意事项

今天处理了一个日期选择器的ie和ff的兼容问题,本来这种情况就很难找错误,找了好久才把错误定位到js中创建元素的方法document.createElement(),这个方法在ie下支持这样创建元素 var inputObj    = document.createElement     ("<input type='text' size='8' style='border:0px;border-bottom:2px solid #c0c0c0;'" readonly >&

document.createElement

document.createElement()的用法 document.createElement()是在对象中创建一个对象,要与appendChild() 或 insertBefore()方法联合使用.其中,appendChild() 方法在节点的子节点列表末添加新的子节点.insertBefore() 方法在节点的子节点列表任意位置插入新的节点. 下面,举例说明document.createElement()的用法.<div id="board"></div&g

javascript document.createElement() document.createTextNode()

//--------------document.createElement("div") var div = document.createElement("div"); div.innerText = "abc"; 效果就是 //<div>abc</div> //---------------document.createTextNode()创建一个文本节点 var div = document.createEleme

如何循环遍历document.querySelectorAll()方法返回的结果

使用JavaScript的forEach方法,我们可以轻松的循环一个数组,但如果你认为document.querySelectorAll()方法返回的应该是个数组,而使用forEach循环它: /* Will Not Work */ document.querySelectorAll('.module').forEach(function() { }); 执行上面的代码,你将会得到执行错误的异常信息.这是因为,document.querySelectorAll()返回的不是一个数组,而是一个No

document.getElementById方法在Firefox与IE中的区别。

如下,有一name="txtVersion"的text控件: <div> <input type="text" name="txtVersion" size="15" value="Version" maxlength="25"> </div> 根据上面信息,我们要用JS获得其控件中的值,我们这样写: var strVersion= document.