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 相关文章推荐
javascript模版引擎-tmpl的bug修复与性能优化分析
Oct 23 Javascript
详解JavaScript基于面向对象之创建对象(1)
Dec 10 Javascript
12 款 JS 代码测试必备工具(翻译)
Dec 13 Javascript
微信小程序开发之相册选择和拍照详解及实例代码
Feb 22 Javascript
js从输入框读取内容,比较两个数字的大小方法
Mar 13 Javascript
Angular中ng-bind和ng-model的区别实例详解
Apr 10 Javascript
vue中子组件传递数据给父组件的讲解
Jan 27 Javascript
node之本地服务器图片上传的方法示例
Mar 26 Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
Aug 24 Javascript
js+audio实现音乐播放器
Sep 13 Javascript
原生js实现自定义难度的扫雷游戏
Jan 22 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
php下mysql数据库操作类(改自discuz)
2010/07/03 PHP
PHP通过header实现文本文件下载的代码
2010/08/08 PHP
php木马webshell扫描器代码
2012/01/25 PHP
深入理解PHP之数组(遍历顺序)  Laruence原创
2012/06/13 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
WordPress中重置文章循环的rewind_posts()函数讲解
2016/01/11 PHP
php的socket编程详解
2016/11/20 PHP
PHP PDOStatement::errorInfo讲解
2019/01/31 PHP
客户端静态页面玩分页
2006/06/26 Javascript
jquery里的正则表达式说明
2011/08/03 Javascript
使用node.js 制作网站前台后台
2014/11/13 Javascript
Javascript通过overflow控制列表闭合与展开的方法
2015/05/15 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
2015/06/05 Javascript
jQuery版本升级踩坑大全
2016/01/12 Javascript
jquery中键盘事件小结
2016/02/24 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
Angular 项目实现国际化的方法
2018/01/08 Javascript
web前端vue之CSS过渡效果示例
2018/01/10 Javascript
JS canvas绘制五子棋的棋盘
2020/05/28 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
vue自定义js图片碎片轮播图切换效果的实现代码
2019/04/28 Javascript
微信小程序 select 下拉框组件功能
2019/09/09 Javascript
JS实现密码框效果
2020/09/10 Javascript
python中遍历文件的3个方法
2014/09/02 Python
Python实现最大子序和的方法示例
2019/07/05 Python
python文字和unicode/ascll相互转换函数及简单加密解密实现代码
2019/08/12 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
python实现梯度下降和逻辑回归
2020/03/24 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
美国最大的家庭鞋类零售商之一:Shoe Carnival
2017/10/06 全球购物
迪奥官网:Dior.com
2018/12/04 全球购物
台湾三立电视电商平台:电电购
2019/09/09 全球购物
大学生党员批评与自我批评范文
2014/10/14 职场文书
2015年幼儿园大班工作总结
2015/04/25 职场文书
2016年党风廉政建设承诺书
2016/03/25 职场文书
Python爬虫之爬取某文库文档数据
2021/04/21 Python