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 相关文章推荐
js替代copy(示例代码)
Nov 27 Javascript
js实现字符串的16进制编码不加密
Apr 25 Javascript
jQuery实现的AJAX简单弹出层效果代码
Nov 26 Javascript
Angularjs通过指令监听ng-repeat渲染完成后执行脚本的方法
Dec 31 Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 Javascript
vue.js使用v-pre与v-html输出HTML操作示例
Jul 07 Javascript
js实现动态添加上传文件页面
Oct 22 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
图解JS原型和原型链实现原理
Sep 15 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
JavaScript中展开运算符及应用的实例代码
Jan 14 Javascript
WebRTC记录音视频流(web技术分享)
Feb 24 Javascript
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变量引用的面试题
2010/08/08 PHP
php中socket的用法详解
2014/10/24 PHP
一些实用的jQuery代码片段收集
2011/07/12 Javascript
js中数组(Array)的排序(sort)注意事项说明
2014/01/24 Javascript
JavaScript 基本概念
2015/01/20 Javascript
JS实现队列与堆栈的方法
2016/04/21 Javascript
详解Angular开发中的登陆与身份验证
2016/07/27 Javascript
jQuery旋转插件jqueryrotate用法详解
2016/10/13 Javascript
真正好用的js验证上传文件大小的简单方法
2016/10/27 Javascript
jQuery animate()实现背景色渐变效果的处理方法【使用jQuery.color.js插件】
2017/03/15 Javascript
JS开发中百度地图+城市联动实现实时触发查询地址功能
2017/04/13 Javascript
简单实现js轮播图效果
2017/07/14 Javascript
浅谈在不使用ssr的情况下解决Vue单页面SEO问题(2)
2018/11/08 Javascript
Next.js项目实战踩坑指南(笔记)
2018/11/29 Javascript
JavaScript+HTML5 canvas实现放大镜效果完整示例
2019/05/15 Javascript
详解React的回调渲染模式
2020/09/10 Javascript
vant 中van-list的用法说明
2020/11/11 Javascript
python轻松实现代码编码格式转换
2015/03/26 Python
关于Python元祖,列表,字典,集合的比较
2017/01/06 Python
Django卸载之后重新安装的方法
2017/03/15 Python
python文件特定行插入和替换实例详解
2017/07/12 Python
python实现决策树分类
2018/08/30 Python
Python实现的排列组合、破解密码算法示例
2019/04/12 Python
Python+OpenCv制作证件图片生成器的操作方法
2019/08/21 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
TensorFlow的环境配置与安装教程详解(win10+GeForce GTX1060+CUDA 9.0+cuDNN7.3+tensorflow-gpu 1.12.0+python3.5.5)
2020/06/22 Python
Flask缓存静态文件的具体方法
2020/08/02 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
同学聚会主持词
2014/03/18 职场文书
公司寄语大全
2014/04/10 职场文书
五分钟演讲稿
2014/04/30 职场文书
2014年民主评议党员工作总结
2014/12/02 职场文书
2015年度班主任自我评价
2015/03/11 职场文书
解决Pytorch中关于model.eval的问题
2021/05/22 Python
Python实现文字pdf转换图片pdf效果
2022/04/03 Python