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 相关文章推荐
Firefox div高度自适应
Apr 28 Javascript
Firefox下无法正常显示年份的解决方法
Sep 04 Javascript
js用Date对象的setDate()函数对日期进行加减操作
Sep 18 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
用move.js库实现百叶窗特效
Feb 08 Javascript
jstree单选功能的实现方法
Jun 07 Javascript
利用SpringMVC过滤器解决vue跨域请求的问题
Feb 10 Javascript
微信小程序显示倒计时功能示例【测试可用】
Dec 03 Javascript
React生命周期原理与用法踩坑笔记
Apr 28 Javascript
vue+animation实现翻页动画
Jun 29 Javascript
js实现纯前端压缩图片
Nov 16 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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大批量数据操作时临时调整内存与执行时间的方法
2011/04/20 PHP
PHP实现生成透明背景的PNG缩略图函数分享
2014/07/08 PHP
详解Grunt插件之LiveReload实现页面自动刷新(两种方案)
2015/07/31 PHP
thinkPHP使用post方式查询时分页失效的解决方法
2015/12/09 PHP
Yii实现微信公众号场景二维码的方法实例
2020/08/30 PHP
一个可以显示阴历的JS代码
2007/03/05 Javascript
javascript DOM编程实例(智播客学习)
2009/11/23 Javascript
jQuery使用hide方法隐藏元素自身用法实例
2015/03/30 Javascript
简述JavaScript中正则表达式的使用方法
2015/06/15 Javascript
JavaScript仿商城实现图片广告轮播实例代码
2016/02/06 Javascript
对jquery的ajax进行二次封装以及ajax缓存代理组件:AjaxCache详解
2016/04/11 Javascript
详解JavaScript时间处理之几个月前或几个月后的指定日期
2016/12/21 Javascript
面试常见的js算法题
2017/03/23 Javascript
vue.js的安装方法
2017/05/12 Javascript
vue.js+Echarts开发图表放大缩小功能实例
2017/06/09 Javascript
微信小程序实现动态获取元素宽高的方法分析
2018/12/10 Javascript
vue element动态渲染、移除表单并添加验证的实现
2019/01/16 Javascript
微信小程序webview 脚手架使用详解
2019/07/22 Javascript
微信小程序实现导航栏和内容上下联动功能代码
2020/06/29 Javascript
[05:31]DOTA2英雄梦之声_第04期_光之守卫
2014/06/23 DOTA
[07:52]2014DOTA2 TI逗比武士游V社解说背后的故事
2014/07/10 DOTA
python从ftp下载数据保存实例
2013/11/20 Python
python根据开头和结尾字符串获取中间字符串的方法
2015/03/26 Python
Python下的subprocess模块的入门指引
2015/04/16 Python
Python正则表达式实现截取成对括号的方法
2017/01/06 Python
简单谈谈Python中的几种常见的数据类型
2017/02/10 Python
python pandas.DataFrame选取、修改数据最好用.loc,.iloc,.ix实现
2018/06/11 Python
使用python实现unix2dos和dos2unix命令的例子
2019/08/13 Python
Django为窗体加上防机器人的验证码功能过程解析
2019/08/14 Python
使用python采集Excel表中某一格数据
2020/05/14 Python
Python利用matplotlib绘制折线图的新手教程
2020/11/05 Python
加热夹克:RAVEAN
2018/10/19 全球购物
澳大利亚美容产品及化妆品在线:Activeskin
2020/06/03 全球购物
企业总经理任命书
2014/06/05 职场文书
文明寝室标语
2014/06/13 职场文书
幼儿园托班教育随笔
2015/08/14 职场文书