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 相关文章推荐
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
javascript 隐藏/显示指定的区域附HTML元素【legend】用法
Mar 05 Javascript
JS中的public和private对象,即static修饰符
Jan 18 Javascript
extjs render 用法介绍
Sep 11 Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 Javascript
javascript运动详解
Jul 06 Javascript
基于Jquery+div+css实现弹出登录窗口(代码超简单)
Oct 27 Javascript
微信小程序 教程之wxapp 视图容器 view
Oct 19 Javascript
javascript中this关键字详解
Dec 12 Javascript
基于axios封装fetch方法及调用实例
Feb 05 Javascript
详解如何在vscode里面调试js和node.js的方法步骤
Dec 24 Javascript
使用React-Router实现前端路由鉴权的示例代码
Jul 26 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 session 错误
2009/05/21 PHP
PHP学习之字符串比较和查找
2011/04/17 PHP
PHP中的替代语法简介
2014/08/22 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP命名空间简单用法示例
2018/12/28 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
javascript 45种缓动效果 非常酷
2011/06/28 Javascript
jQuery+CSS 实现随滚动条增减的汽水瓶中的液体效果
2011/09/26 Javascript
基于jquery实现的一个选择中国大学的弹框 (数据、步骤、代码)
2012/07/26 Javascript
JS 各种网页尺寸判断实例方法
2013/04/18 Javascript
js中document.write使用过程中的一点疑问解答
2014/03/20 Javascript
IE6-IE9中tbody的innerHTML不能赋值的解决方法
2014/06/05 Javascript
js实现单击图片放大图片的方法
2015/02/17 Javascript
Javascript连接Access数据库完整实例
2015/08/03 Javascript
JS拉起或下载app的实现代码
2017/02/22 Javascript
详解Vuex管理登录状态
2017/11/13 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
2018/10/18 Javascript
node实现简单的增删改查接口实例代码
2019/08/22 Javascript
Python解析json文件相关知识学习
2016/03/01 Python
pycharm 主题theme设置调整仿sublime的方法
2018/05/23 Python
详解Python下ftp上传文件linux服务器
2018/06/21 Python
python批量解压zip文件的方法
2019/08/20 Python
Python+appium框架原生代码实现App自动化测试详解
2020/03/06 Python
python 给图像添加透明度(alpha通道)
2020/04/09 Python
Python进行特征提取的示例代码
2020/10/15 Python
细说NumPy数组的四种乘法的使用
2020/12/18 Python
DRF使用simple JWT身份验证的实现
2021/01/14 Python
英国派对礼服和连衣裙购物网站:TFNC London
2018/07/07 全球购物
应聘护士自荐信
2013/10/21 职场文书
顶撞领导检讨书
2014/01/29 职场文书
群众路线教育实践活动方案
2014/02/02 职场文书
职工代表大会主持词
2014/04/01 职场文书
计划生育宣传标语
2014/06/21 职场文书
党员干部群众路线个人整改措施
2014/09/18 职场文书
Python3.8官网文档之类的基础语法阅读
2021/09/04 Python