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 相关文章推荐
TextArea 控件的最大长度问题(js json)
Dec 16 Javascript
javascript权威指南 学习笔记之javascript数据类型
Sep 24 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
idTabs基于JQuery的根据URL参数选择Tab插件
Apr 11 Javascript
纯JS实现五子棋游戏兼容各浏览器(附源码)
Apr 24 Javascript
JS文本获得焦点清除文本文字的示例代码
Jan 13 Javascript
JavaScript将当前时间转换成UTC标准时间的方法
Apr 06 Javascript
跟我学习javascript的prototype,getPrototypeOf和__proto__
Nov 17 Javascript
Javascript基于AJAX回调函数传递参数实例分析
Dec 15 Javascript
jQuery实现标签页效果实战(4)
Feb 08 Javascript
vue父组件通过props如何向子组件传递方法详解
Aug 16 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
Dec 28 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
为什么那些咖啡爱好者大多看不上连锁咖啡店?
2021/03/06 咖啡文化
php debug 安装技巧
2011/04/30 PHP
服务器变量 $_SERVER 的深入解析
2013/07/02 PHP
使用Curl进行抓取远程内容时url中文编码问题示例探讨
2013/10/29 PHP
php实现的简单美国商品税计算函数
2015/07/13 PHP
PHP实现简单汉字验证码
2015/07/28 PHP
PHP 范围解析操作符(::)用法分析【访问静态成员和类常量】
2020/04/14 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
javascript笔记 String类replace函数的一些事
2011/09/22 Javascript
eclipse导入jquery包后报错的解决方法
2014/02/17 Javascript
jQuery中:checked选择器用法实例
2015/01/04 Javascript
JavaScript DOM进阶方法
2015/04/13 Javascript
swtich/if...else的替代语句
2015/08/16 Javascript
js选择器全面解析
2016/06/27 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
通过fastclick源码分析彻底解决tap“点透”
2017/12/24 Javascript
在 Angular中 使用 Lodash 的方法
2018/02/11 Javascript
解决vue build打包之后首页白屏的问题
2018/03/06 Javascript
Vue与Node.js通过socket.io通信的示例代码
2018/07/25 Javascript
vue axios数据请求及vue中使用axios的方法
2018/09/10 Javascript
解决微信小程序调用moveToLocation失效问题【超简单】
2019/04/12 Javascript
python增加矩阵维度的实例讲解
2018/04/04 Python
Python流程控制 while循环实现解析
2019/09/02 Python
django xadmin action兼容自定义model权限教程
2020/03/30 Python
Python连接Impala实现步骤解析
2020/08/04 Python
Python plt 利用subplot 实现在一张画布同时画多张图
2021/02/26 Python
HTML5 Canvas实现平移/放缩/旋转deom示例(附截图)
2013/07/04 HTML / CSS
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
遇到的Mysql的面试题
2014/06/29 面试题
项目建议书模板
2014/05/12 职场文书
运动会宣传口号
2014/06/09 职场文书
工作收入证明范本
2015/06/12 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
2016年第16个全民国防教育日宣传活动总结
2016/04/05 职场文书
nginx结合openssl实现https的方法
2021/07/25 Servers
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js