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 相关文章推荐
Prototype使用指南之dom.js
Jan 10 Javascript
在IE模态窗口中自由查看HTML源码的方法
Mar 08 Javascript
JavaScript 调试器简介
Feb 21 Javascript
解决jquery submit()提交表单提示:f[s] is not a function
Jan 23 Javascript
jquery如何实现在加载完iframe的内容后再进行操作
Sep 10 Javascript
Javascript四舍五入Math.round()与Math.pow()使用介绍
Dec 27 Javascript
js/jquery判断浏览器的方法小结
Sep 02 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
详解vue-router基本使用
Apr 18 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
layui.tree组件的使用以及搜索节点功能的实现
Sep 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
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
php实现根据url自动生成缩略图的方法
2014/09/23 PHP
php使用curl出现Expect:100-continue解决方法
2015/03/03 PHP
javascript显示隐藏层比较不错的方法分析
2008/09/30 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
2009/04/15 Javascript
js解析与序列化json数据(一)json.stringify()的基本用法
2013/02/01 Javascript
JS和Jquery获取和修改label的值的示例代码
2014/01/15 Javascript
js实现获取焦点后光标在字符串后
2014/09/17 Javascript
javascript实现淡蓝色的鼠标拖动选择框实例
2015/05/09 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
Javascript简单实现面向对象编程继承实例代码
2015/11/27 Javascript
自动完成的搜索框javascript实现
2016/02/26 Javascript
JavaScript 身份证号有效验证详解及实例代码
2016/10/20 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
nodejs入门教程一:概念与用法简介
2017/04/24 NodeJs
小程序实现单选多选功能
2018/11/04 Javascript
微信小程序上传文件到阿里OSS教程
2019/05/20 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
解决VUE自定义拖拽指令时 onmouseup 与 click事件冲突问题
2020/07/24 Javascript
Vue3 实现双盒子定位Overlay的示例
2020/12/22 Vue.js
[01:21:07]EG vs Liquid 2018国际邀请赛淘汰赛BO3 第一场 8.25
2018/08/29 DOTA
Python随机生成手机号、数字的方法详解
2017/07/21 Python
利用ctypes获取numpy数组的指针方法
2019/02/12 Python
对Python中小整数对象池和大整数对象池的使用详解
2019/07/09 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
python3.4中清屏的处理方法
2020/07/06 Python
Python如何读取、写入JSON数据
2020/07/28 Python
python安装cx_Oracle和wxPython的方法
2020/09/14 Python
CSS3教程(2):网页边框半径和网页圆角
2009/04/02 HTML / CSS
巧用HTML5给按钮背景设计不同的动画简单实例
2016/08/09 HTML / CSS
如何给HTML标签中的文本设置修饰线
2019/11/18 HTML / CSS
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
孝老爱亲模范事迹材料
2014/05/25 职场文书
学生偷窃检讨书
2014/09/25 职场文书
处级干部考察材料
2014/12/24 职场文书
Python基础知识学习之类的继承
2021/05/31 Python