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 相关文章推荐
jQuery1.5.1 animate方法源码阅读
Apr 05 Javascript
js+html+css实现鼠标移动div实例
Jan 30 Javascript
使用jQuery validate 验证注册表单实例演示
Mar 25 Javascript
基于Node.js的强大爬虫 能直接发布抓取的文章哦
Jan 10 Javascript
Vue2单一事件管理组件通信
May 09 Javascript
5分钟打造简易高效的webpack常用配置
Jul 04 Javascript
select自定义小三角样式代码(实用总结)
Aug 18 Javascript
JavaScript实现写入文件到本地的方法【基于FileSaver.js插件】
Mar 15 Javascript
vue 2.1.3 实时显示当前时间,每秒更新的方法
Sep 16 Javascript
微信小程序的开发范式BeautyWe.js入门详解
Jul 10 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
原生JavaScript之es6中Class的用法分析
Feb 23 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
十大催泪虐心动漫电影,有几部你还没看
2020/03/04 日漫
mysql limit查询优化分析
2008/11/12 PHP
Zend Framework页面缓存实例
2014/06/25 PHP
PHP中使用循环实现的金字塔图形
2014/11/08 PHP
Symfony生成二维码的方法
2016/02/04 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
JavaScript 学习笔记(四)
2009/12/31 Javascript
Javascript Function对象扩展之延时执行函数
2010/07/06 Javascript
js 获取(接收)地址栏参数值的方法
2013/04/01 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
2014/06/07 Javascript
javascript编写贪吃蛇游戏
2015/07/07 Javascript
js实现的动画导航菜单效果代码
2015/09/10 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
jQuery购物网页经典制作案例
2016/08/19 Javascript
Node.js制作简单聊天室
2017/01/12 Javascript
js实现手机拍照上传功能
2017/01/17 Javascript
jQuery绑定事件方法及区别(bind,click,on,live,one)
2017/08/14 jQuery
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
2017/12/27 Javascript
10 种最常见的 Javascript 错误(频率最高)
2018/02/08 Javascript
Js中将Long转换成日期格式的实现方法
2018/06/05 Javascript
Electron 如何调用本地模块的方法
2019/02/01 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
2019/11/25 Javascript
Python使用Windows API创建窗口示例【基于win32gui模块】
2018/05/09 Python
Python操作Excel插入删除行的方法
2018/12/10 Python
python opencv 读取图片 返回图片某像素点的b,g,r值的实现方法
2019/07/03 Python
使用pycharm在本地开发并实时同步到服务器
2019/08/02 Python
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
String和StringBuffer的区别
2015/08/13 面试题
宿舍打麻将检讨书
2014/01/24 职场文书
工作时间上网检讨书
2014/02/03 职场文书
银行求职信怎么写
2014/05/26 职场文书
私人委托书格式
2014/09/10 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书