浅谈javascript中createElement事件

createElement是HTML中应用W3C DOM对像模型建立子节点也就是子元素的概念

代码如下:

<script>
   window.onload = function () {
   var input  = document.createElement('input');
   var button = document.createElement('input');
   input.type ='text'; 
   input.id= 'text';
   input.value ='1';
   button.type='button';
   button.value ='逐加';
   button.style.width = '40px';
   button.style.height = '23px';
   document.body.appendChild(input);
   document.body.appendChild(button);
   button.onclick = function(){
      var value = input.value;
      input.value = value * 1 + 1;
   }
  }
 </script>

注：value其实是一个字符，如果将input.value=value*1+1;换成input.value=value+1;则结果会出现111111，他是不断以字符形式加1的，所以这时候value*1的就能将value值转换成Int型了。

总结：

要最终解决 createElement 方法的兼容性问题，还是要注意判断浏览器，针对 IE 可以使用其特有的通过为createElement 传入一段合法的 HTML 代码字符串作为参数的方法，非 IE 浏览器仍然使用 W3C 规范的标准方法。

赞 (0)

相关推荐

  • 动态的创建一个元素createElement及删除一个元素

    动态的创建一个元素createElement及删除一个元素

    复制代码 代码如下: <html> <script language = "javascript" type = "text/javascript"> function test(){ //创建元素 var myElement = document.createElement("a");//a是想创建的html元素标签名 //给创建的元素添加必要的信息 myElement.href = "http://www.b

  • javascript createElement()创建input不能设置name属性的解决方法

    其中obj.name = "select";这句话并不能起到预期的作用,无论是看生成后的HTML代码还是观察使用document.getElementsByName()获取的数组长度,都会发现这个name设置并没有起作用.当然这种情况只出现在IE6和IE7中,而在FireFox中是没有问题的. Test function addInput(){ var div = document.getElementById("testDiv"); var obj = docum

  • document.createElement()用法

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

  • javascript中createElement的两种创建方式

    本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CreateElement

  • js 用CreateElement动态创建标签示例

    //定义方法创建一个label标签 //*************************************// 复制代码 代码如下: var createLabel = function(id, name, value) { var label_var = document.createElement("label"); var label_id = document.createAttribute("id"); label_id.nodeValue = i

  • 动态加载js文件 document.createElement

    复制代码 代码如下: var Rash=true; var msg=""; function norash() { if (confirm("确定要取消吗")) Rash=false; } function rashit() { setInterval('getrss()',Inttime); } function getrss() {         if (Rash==true)         {         head=document.getElemen

  • createElement和onclick

    无忧脚本代码测试网页 function ck(){ alert("test"); } var ins=document.createElement('input'); ins.type="button"; ins.value="click"; ins.attachEvent("onclick",ck); document.body.appendChild(ins); [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

  • Javascript createElement和innerHTML增加页面元素的性能对比

    最近遇到js的效率问题,是关于在页面中新增元素的问题. 假设我们有页面如下: 复制代码 代码如下: <HTML> <HEAD> </HEAD> <BODY> <div id="div1"></div> </BODY> <script> // 脚本位置 </script> </HTML> 现在,我们要往div1中添加对象,大家都知道在为web页面增加一个元素时可以使用如

  • 使用jQuery解决IE与FireFox下createElement方法的差异

    当我们需要动态生成DOM对象的时候,会使用createElement的方法创建.但是在IE和Firefox下,createElement方法是有差异的. 在 IE 中,可以使用以下两种方式来创建一个元素: 1.document.createElement('table') 2.document.createElement('<table border="0">') 而在 Firefox 只支持: document.createElement('table') 同时,如果添加

  • 动态添加option及createElement使用示例

    动态添加option及createElement使用示例

    复制代码 代码如下: <!DOCTYPE html> <html> <head> <title>select.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is

随机推荐