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 jcrop插件截图使用方法
Nov 20 Javascript
JS实现图片产生波纹一样flash效果的方法
Feb 27 Javascript
jQuery Real Person验证码插件防止表单自动提交
Nov 06 Javascript
vue2 mint-ui loadmore实现下拉刷新,上拉更多功能
Mar 21 Javascript
解析Json字符串的三种方法日常常用
May 02 Javascript
详解Vue的钩子函数(路由导航守卫、keep-alive、生命周期钩子)
Jul 24 Javascript
用node开发并发布一个cli工具的方法步骤
Jan 03 Javascript
详解微信小程序用定时器实现倒计时效果
Apr 30 Javascript
vue弹出框组件封装实例代码
Oct 31 Javascript
解决微信小程序scroll-view组件无横向滚动的问题
Feb 04 Javascript
js实现表单项的全选、反选及删除操作示例
Jun 05 Javascript
简单了解常用的JavaScript 库
Jul 16 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中通过ADO调用Access数据库的方法测试不通过
2006/12/31 PHP
php数组声明、遍历、数组全局变量使用小结
2013/06/05 PHP
浅析PHP中的字符串编码转换(自动识别原编码)
2013/07/02 PHP
php计算到指定日期还有多少天的方法
2015/04/14 PHP
php通过前序遍历树实现无需递归的无限极分类
2015/07/10 PHP
Yii框架学习笔记之session与cookie简单操作示例
2019/04/30 PHP
jQuery数组处理方法汇总
2011/06/20 Javascript
js 实现菜单左右滚动显示示例介绍
2013/11/21 Javascript
javascript中Math.random()使用详解
2015/04/15 Javascript
javascript中的Function.prototye.bind
2015/06/25 Javascript
JavaScript电子时钟倒计时
2016/01/09 Javascript
利用transition实现文字上下抖动的效果
2017/01/21 Javascript
微信小程序 PHP生成带参数二维码
2017/02/21 Javascript
Vue ElementUI之Form表单验证遇到的问题
2017/08/21 Javascript
JS从非数组对象转数组的方法小结
2018/03/26 Javascript
使用mpvue搭建一个初始小程序及项目配置方法
2018/12/03 Javascript
jQuery实现的模仿雨滴下落动画效果
2018/12/11 jQuery
微信小程序 腾讯地图显示偏差问题解决
2019/07/27 Javascript
JS浮点数运算结果不精确的Bug解决
2019/08/01 Javascript
vue中input的v-model清空操作
2019/09/06 Javascript
uni app仿微信顶部导航条功能
2019/09/17 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
[00:59]DOTA2荣耀之路1:Doom is back!weapon X!
2018/05/22 DOTA
使用pdb模块调试Python程序实例
2015/06/02 Python
python简单实现操作Mysql数据库
2018/01/29 Python
numpy.random.seed()的使用实例解析
2018/02/03 Python
详解django.contirb.auth-认证
2018/07/16 Python
详解python调用cmd命令三种方法
2019/07/08 Python
Pytorch之Variable的用法
2019/12/31 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
在职研究生自我鉴定
2013/10/16 职场文书
十八大报告观后感
2014/01/28 职场文书
十佳党员事迹材料
2014/08/28 职场文书
家庭财产分割协议书范本
2014/11/24 职场文书
舌尖上的中国观后感
2015/06/02 职场文书
争做文明公民倡议书
2019/06/24 职场文书