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 Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
当前流行的JavaScript代码风格指南
Sep 10 Javascript
使用RequireJS优化JavaScript引用代码的方法
Jul 01 Javascript
网页收藏夹显示ICO图标(代码少)
Aug 04 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
jQuery实现的网页竖向菜单效果代码
Aug 26 Javascript
浅析JS获取url中的参数实例代码
Jun 14 Javascript
ES6中Array.copyWithin()函数的用法实例详解
Sep 16 Javascript
开发中常用的25个JavaScript单行代码(小结)
Jun 28 Javascript
Electron vue的使用教程图文详解
Jul 05 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vue的生命周期一起来看看
Feb 24 Vue.js
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
PHP 根据IP地址控制访问的代码
2010/04/22 PHP
作为程序员必知的16个最佳PHP库
2015/12/09 PHP
PHP 观察者模式深入理解与应用分析
2019/09/25 PHP
jquery下利用jsonp跨域访问实现方法
2010/07/29 Javascript
jquery 实现二级/三级/多级联动菜单的思路及代码
2013/04/08 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
js变量提升深入理解
2016/09/16 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
canvas学习之API整理笔记(二)
2016/12/29 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
AngularJS 异步解决实现方法
2017/06/12 Javascript
Vue.js 中的 v-cloak 指令及使用详解
2018/11/19 Javascript
解决vue+router路由跳转不起作用的一项原因
2020/07/19 Javascript
python修改操作系统时间的方法
2015/05/18 Python
利用Python学习RabbitMQ消息队列
2015/11/30 Python
基于python list对象中嵌套元组使用sort时的排序方法
2018/04/18 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
python使用PIL实现多张图片垂直合并
2019/01/15 Python
Python表达式的优先级详解
2020/02/18 Python
利用python 读写csv文件
2020/09/10 Python
英国街头品牌:Bee Inspired Clothing
2018/02/12 全球购物
法国最大电子商务平台:Cdiscount
2018/03/13 全球购物
新闻网站实习自我鉴定
2013/09/25 职场文书
高中化学教学反思
2014/01/13 职场文书
建筑投标担保书
2014/05/20 职场文书
节约用电标语
2014/06/17 职场文书
汽车车尾标语大全
2015/08/11 职场文书
2016年党员学习廉政准则心得体会
2016/01/20 职场文书
2016个人先进事迹材料范文
2016/03/01 职场文书
2016年党员公开承诺书范文
2016/03/24 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
HTML怎么设置下划线?html文字加下划线方法
2021/12/06 HTML / CSS
微信小程序APP页面的之间的相互传递参数以及自定义组件
2022/04/19 Javascript