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插入样式实现代码
Feb 22 Javascript
Bootstrap CSS组件之按钮组(btn-group)
Dec 17 Javascript
javascript操作cookie
Jan 17 Javascript
ajax分页效果(bootstrap模态框)
Jan 23 Javascript
浅谈node.js 命令行工具(cli)
May 10 Javascript
node 命令方式启动修改端口的方法
May 12 Javascript
JavaScript捕捉事件和阻止冒泡事件实例分析
Aug 03 Javascript
jQuery 同时获取多个标签的指定内容并储存为数组
Nov 20 jQuery
@angular前端项目代码优化之构建Api Tree的方法
Dec 24 Javascript
微信小程序日历效果
Dec 29 Javascript
记一次react前端项目打包优化的方法
Mar 30 Javascript
Object.keys() 和 Object.getOwnPropertyNames() 的区别详解
May 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
sqlyog 中文乱码问题的设置方法
2008/10/19 PHP
PHP 文件上传全攻略
2010/04/28 PHP
document.all与WEB标准
2020/05/13 Javascript
用ASP将SQL搜索出来的内容导出为TXT的代码
2007/07/27 Javascript
js+数组实现网页上显示时间/星期几的实用方法
2013/01/18 Javascript
细说javascript函数从函数的构成开始
2013/08/29 Javascript
JavaScript设计模式之单件模式介绍
2014/12/28 Javascript
JavaScript取得WEB安全颜色列表的方法
2015/07/14 Javascript
JS自定义选项卡函数及用法实例分析
2015/09/02 Javascript
详解webpack自动生成html页面
2017/06/29 Javascript
vue微信分享 vue实现当前页面分享其他页面
2017/12/02 Javascript
动态加载JavaScript文件的3种方式
2018/05/05 Javascript
Windows下Node爬虫神器Puppeteer安装记
2019/01/09 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
原生js实现分页效果
2020/09/23 Javascript
python的socket编程入门
2018/01/29 Python
pandas将numpy数组写入到csv的实例
2018/07/04 Python
python读取word文档,插入mysql数据库的示例代码
2018/11/07 Python
Python中一般处理中文的几种方法
2019/03/06 Python
Python高级特性与几种函数的讲解
2019/03/08 Python
解决Python3 抓取微信账单信息问题
2019/07/19 Python
python实现按首字母分类查找功能
2019/10/31 Python
解决Python使用列表副本的问题
2019/12/19 Python
Html5页面在微信端的分享的实现方法
2018/08/30 HTML / CSS
canvas绘制太极图的实现示例
2020/04/29 HTML / CSS
彪马俄罗斯官网:PUMA俄罗斯
2019/07/13 全球购物
艺术设计专业个人求职信范文
2013/12/11 职场文书
数控专业个人求职信范文
2014/02/05 职场文书
个人诉讼委托书范本
2014/10/17 职场文书
新生开学寄语大全
2015/05/28 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
少年的你:世界上没有如果,要在第一次就勇敢的反抗
2019/11/20 职场文书
Java中的继承、多态以及封装
2022/04/11 Java/Android
Python Django / Flask如何使用Elasticsearch
2022/04/19 Python
Redis批量生成数据的实现
2022/06/05 Redis
基于Python实现西西成语接龙小助手
2022/08/05 Golang