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 相关文章推荐
20个非常棒的Jquery实用工具 国外文章
Jan 01 Javascript
Javascript 面向对象 重载
May 13 Javascript
JavaScript通过function定义对象并给对象添加toString()方法实例分析
Mar 23 Javascript
在JavaScript中处理时间之setMinutes()方法的使用
Jun 11 Javascript
每天一篇javascript学习小结(基础知识)
Nov 10 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
JS检测移动端横竖屏的代码
May 30 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
Jun 15 Javascript
javascript十六进制数字和ASCII字符之间的转换方法
Dec 27 Javascript
js实现延迟加载的几种方法
Apr 24 Javascript
jquery实现动态创建form并提交的方法示例
May 27 jQuery
基于JavaScript实现十五拼图代码实例
Apr 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数组函数序列之krsort()- 对数组的元素键名进行降序排序,保持索引关系
2011/11/02 PHP
PHP大小写问题:函数名和类名不区分,变量名区分
2013/06/17 PHP
PHP安装GeoIP扩展根据IP获取地理位置及计算距离的方法
2016/07/01 PHP
PHP通过文件路径获取文件名的实例代码
2018/10/14 PHP
Aliyun Linux 编译安装 php7.3 tengine2.3.2 mysql8.0 redis5的过程详解
2020/10/20 PHP
javascript call和apply方法
2008/11/24 Javascript
JavaScript CSS修改学习第六章 拖拽
2010/02/19 Javascript
JavaScript入门之基本函数详解
2011/10/21 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
2012/05/30 Javascript
JS 获取浏览器和屏幕宽高等信息的实现思路及代码
2013/07/31 Javascript
javascript版2048小游戏
2015/03/18 Javascript
PHP抓取HTTPS内容和错误处理的方法
2016/09/30 Javascript
使用 Vue.js 仿百度搜索框的实例代码
2017/05/09 Javascript
Vue.js与 ASP.NET Core 服务端渲染功能整合
2017/11/16 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
vue路由 遍历生成复数router-link的例子
2019/10/30 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
python正则表达式判断字符串是否是全部小写示例
2013/12/25 Python
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
python实现按任意键继续执行程序
2016/12/30 Python
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
Python中装饰器学习总结
2018/02/10 Python
使用Python的SymPy库解决数学运算问题的方法
2019/03/27 Python
python被修饰的函数消失问题解决(基于wraps函数)
2019/11/04 Python
Python中类似于jquery的pyquery库用法分析
2019/12/02 Python
python通过函数名调用函数的几种场景
2020/09/23 Python
雅诗兰黛澳大利亚官网:Estée Lauder澳大利亚
2019/05/31 全球购物
介绍一下gcc特性
2012/01/20 面试题
大专生简历的自我评价
2013/11/26 职场文书
捐书活动总结
2014/05/04 职场文书
个人担保书格式范文
2014/05/12 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
保密工作承诺书
2014/08/29 职场文书
中标通知书格式
2015/04/17 职场文书
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技
基于Apache Hudi在Google云构建数据湖平台的思路详解
2022/04/07 Servers