javascript中createElement的两种创建方式


Posted in Javascript onMay 14, 2015

本文实例讲述了javascript中createElement的两种创建方式。分享给大家供大家参考。具体实现方法如下:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>CreateElement的两种创建方式</title>
 <script type="text/javascript">
 function CreateButton1() {
  var btn = document.createElement("input");
  btn.type = "button";
  btn.value = "我是动态创建的1";
  btn.onclick = function () {
  alert(this.value);
  }
  document.body.appendChild(btn);
 }
 function CreateButton2() {
  var btn = document.createElement("<input type='button' value='我是动态创建的2' "+"onclick='OnClick2(this)' />");
  document.body.appendChild(btn);
 }
 function OnClick2(btn) {
  alert(btn.value);
 }
 function CreateLink() {
  var link = document.createElement("<a href='http://www.baidu.com'>百度</a>");
  //注意这里链接的文本“百度”是不会显示出来的,
  //必须设置innerText或innerHTML
  link.innerText = "百度";
  document.body.appendChild(link);
 }
 function CreateLabel() {
  var lbl = document.createElement("label");
  lbl.setAttribute("for", "userName");
  lbl.setAttribute("myAge", "12");
  //可以设置自定义标示
  lbl.innerText = "用户名:";
  document.body.appendChild(lbl);
 }
 </script>
</head>
<body>
 <input type="button" value="动态创建按钮1" onclick="CreateButton1()" />
 <input type="button" value="动态创建按钮2" onclick="CreateButton2()" />
 <input type="button" value="动态创建链接" onclick="CreateLink()" />
 <input type="button" value="动态创建Label" onclick="CreateLabel()" />
 <input type="text" id="userName" value="李莫" />
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
让任务管理器中的CPU跳舞的js代码
Nov 01 Javascript
javascript 动态调整图片尺寸实现代码
Dec 28 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
Dec 30 Javascript
JS TextArea字符串长度限制代码集合
Oct 31 Javascript
JavaScript数据类型之基本类型和引用类型的值
Apr 01 Javascript
jquery制作属于自己的select自定义样式
Nov 23 Javascript
初步使用Node连接Mysql数据库
Mar 03 Javascript
vue页面使用阿里oss上传功能的实例(一)
Aug 09 Javascript
Vue SSR 组件加载问题
May 02 Javascript
Vue2.0生命周期的理解
Aug 20 Javascript
JS数组push、unshift、pop、shift方法的实现与使用方法示例
Apr 29 Javascript
vue3.0 数字翻牌组件的使用方法详解
Apr 20 Vue.js
javascript常用方法总结
May 14 #Javascript
javascript实现动态改变层大小的方法
May 14 #Javascript
JavaScript中停止执行setInterval和setTimeout事件的方法
May 14 #Javascript
javascript实现点击按钮弹出一个可关闭层窗口同时网页背景变灰的方法
May 13 #Javascript
JS实现简洁、全兼容的拖动层实例
May 13 #Javascript
javascript实现图片跟随鼠标移动效果的方法
May 13 #Javascript
javascript鼠标滑动评分控件完整实例
May 13 #Javascript
You might like
PHP写MySQL数据 实现代码
2009/06/15 PHP
PHP写的求多项式导数的函数代码
2012/07/04 PHP
基于php split()函数的用法详解
2013/06/05 PHP
php生成N个不重复的随机数实例
2013/11/12 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(三)
2014/06/23 PHP
php使用pack处理二进制文件的方法
2014/07/03 PHP
php for 循环使用的简单实例
2016/06/02 PHP
PHP长连接实现与使用方法详解
2018/02/11 PHP
jquery 图片上传按比例预览插件集合
2011/05/28 Javascript
动态获取复选框checkbox选中个数的jquery代码
2013/06/25 Javascript
js 时间函数应用加、减、比较、格式转换的示例代码
2013/08/23 Javascript
Jquery 的outerHeight方法使用介绍
2013/09/11 Javascript
Node.js中process模块常用的属性和方法
2016/12/13 Javascript
vue小图标favicon不显示的解决方案
2017/09/19 Javascript
Vue Cli 3项目使用融云IM实现聊天功能的方法
2019/04/19 Javascript
JavaScript生成随机验证码代码实例
2019/09/28 Javascript
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
vue路由传参的基本实现方式小结【三种方式】
2020/02/05 Javascript
JS数组方法reduce的用法实例分析
2020/03/03 Javascript
[01:17:55]VGJ.T vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/20 DOTA
[06:07]DOTA2-DPC中国联赛 正赛 Ehome vs VG 选手采访
2021/03/11 DOTA
Python 判断是否为质数或素数的实例
2017/10/30 Python
使用PyInstaller将python转成可执行文件exe笔记
2018/05/26 Python
pytorch对可变长度序列的处理方法详解
2018/12/08 Python
python+pyqt5实现KFC点餐收银系统
2019/01/24 Python
python assert的用处示例详解
2019/04/01 Python
python tkinter窗口最大化的实现
2019/07/15 Python
python深copy和浅copy区别对比解析
2019/12/26 Python
师范大学音乐表演专业求职信
2013/10/23 职场文书
公务员年总结的自我评价
2013/10/25 职场文书
八年级英语教学反思
2014/01/09 职场文书
保健品市场营销方案
2014/03/31 职场文书
民事撤诉申请书范本
2015/05/18 职场文书
资产移交协议书
2016/03/24 职场文书
演讲稿之感恩老师(三篇范文)
2019/09/06 职场文书
MySQL 视图(View)原理解析
2021/05/19 MySQL