javascript中createElement的两种创建方式_javascript技巧

本文实例讲述了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
, createElement
创建方式
javascript element、createelement、js createelement、react createelement、jquery createelement,以便于您获取更多的相关知识。

时间: 2024-10-26 04:09:07

javascript中createElement的两种创建方式_javascript技巧的相关文章

javascript中createElement的两种创建方式

  本文实例讲述了javascript中createElement的两种创建方式.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 <html xmlns="http://www.w3.org/1999/xhtml"> &l

Javascript中call的两种用法实例_javascript技巧

用法一(常见用法): 表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例: 复制代码 代码如下: function Class1(){    this.name = "class1";    this.showName = function(){        alert(this.name);    }}function Class2(){    this.name = "class2";}var c1

javascript里模拟sleep(两种实现方式)_javascript技巧

有几种方式,但都不完美 其一,不断循环,直到达到指定时间 复制代码 代码如下: function sleep(numberMillis) { var now = new Date(); var exitTime = now.getTime() + numberMillis; while (true) { now = new Date(); if (now.getTime() > exitTime) return; } } 其实代码并没有让脚本sleep下来, 相反让CPU迅速上到高负荷的附作用.

详解Android中Fragment的两种创建方式_Android

fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认为fragment是activity的一个模块零件,它有自己的生命周期,接收它自己的输入事件,并且可以在Activity运行时添加或者删除. 两个概念:Fragment.宿主 fragment的生命周期直接受其宿主activity的生命周期的影响.例如,一旦activity被暂停,它里面所有的fra

JS 动态加载js文件和css文件 同步/异步的两种简单方式_javascript技巧

/*动态添加js或css,URL:文件路径,FileType:文件类型(js/css)*/ function AddJsFiles(URL,FileType){ var oHead = document.getElementsByTagName('HEAD').item(0); var addheadfile; if(FileType=="js"){ addheadfile= document.createElement("script"); addheadfile

javascript中创建对象的几种方法总结_javascript技巧

前言: 随着web 2.0 的兴起(最具代表性的是Ajax技术了),javascript不再是程序员眼中的"玩具语言". 编程在不断的简化,可是"用户体验.性能.兼容性.可扩展......"要求却在不断提高,随之涌现出Prototype.jQuery.ExtJs.Dojo等优秀的框架(类库),大大简化了web开发. 越来越多的人开始深入研究和使用javascript,当然,企业对开发者的要求也越来越高.就拿自己的经历来讲,零几年的时候,我能拿javascript写一

JavaScript数组去重的两种方法推荐_javascript技巧

1.数组去重: Array类型并没有提供去重复的方法,如果要把数组的重复元素干掉,那得自己想办法: 方法一:利用indexOf方法: var aa=[1,3,5,4,3,3,1,4] function arr(arr) { var result=[] for(var i=0; i<arr.length; i++){ if(result.indexOf(arr[i])==-1){ result.push(arr[i]) } } console.log(result) } arr(aa) 方法二:

详解Android中Fragment的两种创建方式

fragment是Activity中用户界面的一个行为或者是一部分.你可以在一个单独的Activity上把多个Fragment组合成为一个多区域的UI,并且可以在多个Activity中再使用.你可以认为fragment是activity的一个模块零件,它有自己的生命周期,接收它自己的输入事件,并且可以在Activity运行时添加或者删除. 两个概念:Fragment.宿主 fragment的生命周期直接受其宿主activity的生命周期的影响.例如,一旦activity被暂停,它里面所有的fra

Javascript中call的两种用法实例

 这篇文章主要介绍了Javascript中call的两种用法实例,有需要的朋友可以参考一下 用法一(常见用法):   表现形式为:一个对象.方法.call(另一个对象),意义是用另一个对象代替当前对象,执行当前对象的方法.先看示例:  代码如下: function Class1(){     this.name = "class1";     this.showName = function(){         alert(this.name);     } } function C