Javascript小技巧之生成html元素


Posted in Javascript onMay 15, 2014

Javascript 生成 HTML元素的方法在本文中介绍2种,第一种是比较正规的创建元素方法,第二种是利用javascript中的write()方法直接写出html元素。

方法一:

   //createElement()创建input元素到obj对象中
   var obj = document.createElement('input');
   //选择要生成地点的前一个元素
   var before = document.getElementById('before');
   //设置obj元素名,值
      obj.name='name';
      obj.value='value';
      //setAttribute是可以自由定义属性的,不仅id和type,name和value也可以在这定义
      obj.setAttribute('id','idname');
      obj.setAttribute('type','typename');
      //在前一个元素后面添加obj
      before.appendChild(obj);

方法二:

document.write("<inpt name='name' value='value' id='idname' type='typename'>");

这里列举了这2种生成html的<input>元素的方法,第一种比较规范,代码比较多,第二种比较少代码。

Javascript 相关文章推荐
jquery select选中的一个小问题
Oct 11 Javascript
jquery将一个表单序列化为一个对象的方法
Dec 02 Javascript
如何判断元素是否为HTMLElement元素
Dec 06 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
JavaScript中Number对象的toFixed() 方法详解
Sep 02 Javascript
Javascript json object 与string 相互转换的简单实现
Sep 27 Javascript
JavaScript中boolean类型之三种情景实例代码
Nov 21 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
ES6中class类用法实例浅析
Apr 06 Javascript
Angular2.0/4.0 使用Echarts图表的示例代码
Dec 07 Javascript
javascript设计模式 ? 观察者模式原理与用法实例分析
Apr 22 Javascript
js实现圆形菜单选择器
Dec 03 Javascript
javascript屏蔽右键代码
May 15 #Javascript
js获取窗口相对于屏幕左边和上边的位置坐标
May 15 #Javascript
jquery如何判断表格同一列不同行input数据是否重复
May 14 #Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
May 14 #Javascript
jquery-syntax动态语法着色示例代码
May 14 #Javascript
jquery对table中各数据的增加、保存、删除操作示例
May 14 #Javascript
调整小数的格式保留小数点后两位
May 14 #Javascript
You might like
在windows iis5下安装php4.0+mysql之我见
2006/10/09 PHP
PHP获取时间排除周六、周日的两个方法
2014/06/30 PHP
php通过隐藏表单控件获取到前两个页面的url
2014/09/09 PHP
PHP实现Session入库/存入redis的方法
2017/05/04 PHP
详解php中curl返回false的解决办法
2019/03/18 PHP
javascript让setInteval里的函数参数中的this指向特定的对象
2010/01/31 Javascript
jQuery Tab插件 用于在Tab中显示iframe,附源码和详细说明
2011/06/27 Javascript
jquery延迟加载外部js实现代码
2013/01/11 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
2015/09/01 Javascript
浅析jQuery事件之on()方法绑定多个选择器,多个事件
2016/04/27 Javascript
Bootstrap编写一个兼容主流浏览器的受众巨幕式风格页面
2016/07/01 Javascript
微信小程序 基础知识css样式media标签
2017/02/15 Javascript
基于nodejs的雪碧图制作工具的示例代码
2018/11/05 NodeJs
VUE+node(express)实现前后端分离
2019/10/13 Javascript
基于JS实现父组件的请求服务过程解析
2019/10/14 Javascript
JavaScript中this的学习笔记及用法整理
2020/02/17 Javascript
JS面向对象编程基础篇(三) 继承操作实例详解
2020/03/03 Javascript
jquery实现有过渡效果的tab切换
2020/07/17 jQuery
javascript this指向相关问题及改变方法
2020/11/19 Javascript
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
初步介绍Python中的pydoc模块和distutils模块
2015/04/13 Python
Python字符串详细介绍
2015/05/09 Python
Python中list查询及所需时间计算操作示例
2018/06/21 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
Python实现密码薄文件读写操作
2019/12/16 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
Canvas 文本转粒子效果的实现代码
2019/02/14 HTML / CSS
Jones Bootmaker官网:优质靴子和鞋子在线
2020/11/30 全球购物
应届生会计求职信
2013/11/11 职场文书
主持人演讲稿范文
2013/12/28 职场文书
开办饭店创业计划书
2013/12/28 职场文书
《学会合作》教学反思
2014/04/12 职场文书
会计个人实习计划书
2014/08/15 职场文书
党支部创先争优活动总结
2014/08/28 职场文书
商场广播稿范文
2015/08/19 职场文书
动视暴雪取消疫苗禁令 让所有员工返回线下工作
2022/04/03 其他游戏