浅谈javascript中createElement事件


Posted in Javascript onDecember 05, 2014

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 规范的标准方法。

Javascript 相关文章推荐
二行代码解决全部网页木马
Mar 28 Javascript
使用JavaScript修改浏览器URL地址栏的实现代码
Oct 21 Javascript
基于Jquery easyui 选中特定的tab
Nov 17 Javascript
基于JavaScript实现右键菜单和拖拽功能
Nov 28 Javascript
Three.js实现绘制字体模型示例代码
Sep 26 Javascript
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
vue-cli安装使用流程步骤详解
Nov 08 Javascript
微信小程序日历效果
Dec 29 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 Javascript
如何解决jQuery 和其他JS库的冲突
Jun 22 jQuery
javascript的push使用指南
Dec 05 #Javascript
javascript结合ajax读取txt文件内容
Dec 05 #Javascript
javascript实现切换td中的值
Dec 05 #Javascript
使用Javascript简单实现图片无缝滚动
Dec 05 #Javascript
深入分析js的冒泡事件
Dec 05 #Javascript
Javascript解析URL方法详解
Dec 05 #Javascript
jQuery不兼容input的change事件问题解决过程
Dec 05 #Javascript
You might like
电脑硬件及电脑配置知识大全
2020/03/17 数码科技
如何在Ubuntu下启动Apache的Rewrite功能
2013/07/05 PHP
php设置静态内容缓存时间的方法
2014/12/01 PHP
PHP微信开发之查询微信精选文章
2016/06/23 PHP
PHP入门教程之表单与验证实例详解
2016/09/11 PHP
php实现简单四则运算器
2020/11/29 PHP
Ext JS Grid在IE6 下宽度的问题解决方法
2009/02/15 Javascript
JS window.opener返回父页面的应用
2009/10/24 Javascript
Document:getElementsByName()使用方法及示例
2013/10/28 Javascript
减少访问DOM的次数提升javascript性能
2014/02/24 Javascript
node.js中的fs.symlink方法使用说明
2014/12/15 Javascript
js实现下拉框选择要显示图片的方法
2015/02/16 Javascript
javascript实现checkBox的全选,反选与赋值
2015/03/12 Javascript
javascript实现简单的进度条
2015/07/02 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
基于JavaScript实现带缩略图的轮播效果
2017/01/12 Javascript
jquery——九宫格大转盘抽奖实例
2017/01/16 Javascript
iframe与主框架跨域相互访问实现方法
2017/09/14 Javascript
详解node+express+ejs+bootstrap构建项目
2017/09/27 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
Vue实现滑动拼图验证码功能
2019/09/15 Javascript
[04:56]经典回顾:前Ehome 与 前LGD
2015/02/26 DOTA
Python入门_浅谈数据结构的4种基本类型
2017/05/16 Python
python并发编程之线程实例解析
2017/12/27 Python
Python实现XML文件解析的示例代码
2018/02/05 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
IE滤镜与CSS3效果(详细整理分享)
2013/01/25 HTML / CSS
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
餐厅总厨求职信
2014/03/04 职场文书
中国梦主题教育活动总结
2014/05/05 职场文书
趣味运动会策划方案
2014/06/02 职场文书
2014年度党员自我评议
2014/09/13 职场文书
乡镇群众路线整改落实情况汇报
2014/10/28 职场文书
电影小兵张嘎观后感
2015/06/03 职场文书
Python OpenCV 图像平移的实现示例
2021/06/04 Python