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 判断指定字符串是否为有效数字
May 11 Javascript
JS中for循序中延迟加载动态效果的具体实现
Aug 18 Javascript
Javascript基础知识(三)BOM,DOM总结
Sep 29 Javascript
JavaScript中的全局对象介绍
Jan 01 Javascript
第四章之BootStrap表单与图片
Apr 25 Javascript
Vue.js每天必学之过滤器与自定义过滤器
Sep 07 Javascript
AngularJs定时器$interval 和 $timeout详解
May 25 Javascript
JavaScript面试出现频繁的一些易错点整理
Mar 29 Javascript
浅谈vue中关于checkbox数据绑定v-model指令的个人理解
Nov 14 Javascript
JavaScript实现的联动菜单特效示例
Jul 08 Javascript
一文秒懂JavaScript构造函数、实例、原型对象以及原型链
Aug 25 Javascript
利用uni-app生成微信小程序的踩坑记录
Apr 05 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
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP 获取远程文件内容的函数代码
2010/03/24 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
Discuz!X中SESSION机制实例详解
2015/09/23 PHP
PHP数据库操作Helper类完整实例
2016/05/11 PHP
yii2.0框架使用 beforeAction 防非法登陆的方法分析
2019/09/11 PHP
PHP+fiddler抓包采集微信文章阅读数点赞数的思路详解
2019/12/20 PHP
利用jquery操作select下拉列表框的代码
2010/06/04 Javascript
如何使用Jquery获取Form表单中被选中的radio值
2013/08/09 Javascript
jquery 合并内容相同的单元格(示例代码)
2013/12/13 Javascript
JavaScript中的prototype和constructor简明总结
2014/04/05 Javascript
JS实现倒计时和文字滚动的效果实例
2014/10/29 Javascript
深入理解JavaScript编程中的原型概念
2015/06/25 Javascript
Bootstrap学习笔记之css样式设计(1)
2016/06/07 Javascript
浅析js的模块化编写 require.js
2016/12/07 Javascript
JavaScript 中 apply 、call 的详解
2017/03/21 Javascript
Vue项目中添加锁屏功能实现思路
2018/06/29 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
Vue使用.sync 实现父子组件的双向绑定数据问题
2019/04/04 Javascript
vue设置默认首页的操作
2020/08/12 Javascript
JS删除对象中某一属性案例详解
2020/09/08 Javascript
浅谈vue websocket nodeJS 进行实时通信踩到的坑
2020/09/22 NodeJs
[05:04]完美世界携手游戏风云打造 卡尔工作室地图界面篇
2013/04/23 DOTA
[01:09]DOTAPLUS——DOTA2的新时代
2018/04/04 DOTA
详解Python中的__init__和__new__
2014/03/12 Python
让 python 命令行也可以自动补全
2014/11/30 Python
使用PyCharm配合部署Python的Django框架的配置纪实
2015/11/19 Python
python实现windows倒计时锁屏功能
2019/07/30 Python
解决python web项目意外关闭,但占用端口的问题
2019/12/17 Python
PyCharm+PyQt5+QtDesigner配置详解
2020/08/12 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
中专毕业生自荐信范文
2013/11/28 职场文书
大学生万能检讨书范例
2014/10/04 职场文书
2014年超市员工工作总结
2014/11/18 职场文书
认真学习保证书
2015/02/26 职场文书
解决IIS7下无法绑定https主机的问题
2022/04/29 Servers