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 相关文章推荐
使一个函数作为另外一个函数的参数来运行的javascript代码
Aug 13 Javascript
jquery如何根据值设置默认的选中项
Mar 17 Javascript
jquery隔行换色效果实现方法
Jan 15 Javascript
一个用jquery写的判断div滚动条到底部的方法【推荐】
Apr 29 Javascript
微信小程序 wxapp画布 canvas详细介绍
Oct 31 Javascript
bootstrap PrintThis打印插件使用详解
Feb 20 Javascript
Angular2平滑升级到Angular4的步骤详解
Mar 29 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
Jquery中.bind()、.live()、.delegate()和.on()之间的区别详解
Aug 01 jQuery
微信小程序基础教程之worker线程的使用方法
Jul 15 Javascript
如何在vue 中引入使用jquery
Nov 10 jQuery
js实现移动端轮播图滑动切换
Dec 21 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
利用static实现表格的颜色隔行显示的代码
2007/09/02 PHP
php判断邮箱地址是否存在的方法
2016/02/13 PHP
利用PHPStorm如何开发Laravel应用详解
2017/08/30 PHP
php如何获取Http请求
2020/04/30 PHP
jquery 锁定弹出层实现代码
2010/02/23 Javascript
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jQuery页面滚动浮动层智能定位实例代码
2011/08/23 Javascript
利用JS来控制键盘的上下左右键(示例代码)
2013/12/14 Javascript
node.js中的fs.writeSync方法使用说明
2014/12/15 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript实现标题栏文字轮播效果代码
2015/10/24 Javascript
JavaScript中获取HTML元素值的三种方法
2016/06/20 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
2016/12/31 Javascript
JS百度地图搜索悬浮窗功能
2017/01/12 Javascript
vue mixins组件复用的几种方式(小结)
2017/09/06 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
详解vue-video-player使用心得(兼容m3u8)
2019/08/23 Javascript
vue-cli单页面预渲染seo-prerender-spa-plugin操作
2020/08/10 Javascript
vue3.0 项目搭建和使用流程
2021/03/04 Vue.js
[55:39]DOTA2-DPC中国联赛 正赛 VG vs LBZS BO3 第二场 1月19日
2021/03/11 DOTA
pycharm 实现显示project 选项卡的方法
2019/01/17 Python
python UDP(udp)协议发送和接收的实例
2019/07/22 Python
python实现的生成word文档功能示例
2019/08/23 Python
python自动下载图片的方法示例
2020/03/25 Python
Nginx+Uwsgi+Django 项目部署到服务器的思路详解
2020/05/08 Python
python编写一个会算账的脚本的示例代码
2020/06/02 Python
中国综合网上购物商城:苏宁易购
2016/08/09 全球购物
LA MER海蓝之谜美国官网:传奇面霜
2016/08/27 全球购物
ProBikeKit美国官网:自行车套件,跑步和铁人三项套件
2016/10/13 全球购物
网络工程师个人的自我评价范文
2013/10/01 职场文书
机电一体化专业推荐信
2013/12/03 职场文书
尽职尽责村干部自我鉴定
2014/01/23 职场文书
银行贷款承诺书
2014/03/29 职场文书
机械操作工岗位职责
2014/08/08 职场文书
2015年超市工作总结
2015/04/09 职场文书
python多次执行绘制条形图
2022/04/20 Python