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 相关文章推荐
Mootools 1.2教程 类(一)
Sep 15 Javascript
很棒的学习jQuery的12个网站推荐
Apr 28 Javascript
js和css写一个可以自动隐藏的悬浮框
Mar 05 Javascript
一个简单的实现下拉框多选的插件可移植性比较好
May 05 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
jQuery判断是否存在滚动条的简单方法
Sep 17 Javascript
js 数字、字符串、布尔值的转换方法(必看)
Apr 07 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
Jul 03 Javascript
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
Jul 24 Javascript
如何将JavaScript将数组转为树形结构
Jun 02 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
Laravel 4.2 中队列服务(queue)使用感受
2014/10/30 PHP
浅谈PHP中output_buffering
2015/07/13 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP实现找出有序数组中绝对值最小的数算法分析
2017/08/07 PHP
PHP获取ttf格式文件字体名的方法示例
2019/03/06 PHP
RR vs IO BO3 第一场2.13
2021/03/10 DOTA
select、radio表单回显功能实现避免使用jquery载入赋值
2013/06/08 Javascript
iframe如何动态创建及释放其所占内存
2014/09/03 Javascript
JavaScript位移运算符(无符号) &gt;&gt;&gt; 三个大于号 的使用方法详解
2016/03/31 Javascript
jQuery绑定事件-多种实现方式总结
2016/05/09 Javascript
深入理解JavaScript内置函数
2016/06/03 Javascript
jQuery 3.0中存在问题及解决办法
2016/07/15 Javascript
jquery dataTable 后台加载数据并分页实例代码
2017/06/07 jQuery
JS实现li标签的删除
2019/04/12 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
2019/10/16 Javascript
JS一次前端面试经历记录
2020/03/19 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
原生js实现自定义消息提示框
2020/11/19 Javascript
深入浅出学习python装饰器
2017/09/29 Python
Python使用pylab库实现绘制直方图功能示例
2018/06/01 Python
python中的json总结
2018/10/11 Python
Python Tornado之跨域请求与Options请求方式
2020/03/28 Python
Ubuntu中配置TensorFlow使用环境的方法
2020/04/21 Python
python+selenium+chrome批量文件下载并自动创建文件夹实例
2020/04/27 Python
Python matplotlib画图时图例说明(legend)放到图像外侧详解
2020/05/16 Python
windows+vscode安装paddleOCR运行环境的步骤
2020/11/11 Python
英国山地公路自行车商店:Tweeks Cycles
2018/03/16 全球购物
Ray-Ban雷朋西班牙官网:全球领先的太阳眼镜品牌
2018/11/28 全球购物
舞蹈教育学专业推荐信
2013/11/27 职场文书
大学生实习思想汇报
2014/01/12 职场文书
团日活动总结模板
2014/06/25 职场文书
公务员上班玩游戏检讨书
2014/09/17 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
追悼词范文大全
2015/06/23 职场文书
Python源码解析之List
2021/05/21 Python
使用Java去实现超市会员管理系统
2022/03/18 Java/Android