动态创建元素可以说是DOM中常做的事情，下面我来介绍在jquery中利用appendTo来动态创建元素，有需要的朋友可参考参考。

当HTML字符串是没有属性的元素是, 内部使用document.createElement创建元素, 比如:

//jQuery内部使用document.createElement创建元素:

  1. $("").css("border","solid 1px #FF0000").html("动态创建的div").appendTo(testDiv);

复制代码

否则使用innerHTML方法创建元素:

//jQuery内部使用innerHTML创建元素:

  1. $("动态创建的div").appendTo(testDiv)

复制代码

看一个动态创建DOM、表单元素实例

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>createElement</title>
  6. <style type="text/css">
  7. .warpper{ border:1px solid red; padding:8px;}
  8. </style>
  9. <script type="text/javascript" language="javascript" src="JavaScript/jquery-1.6.1.min.js" ></script>
  10. <script type="text/javascript" language="javascript">
  11. <!--
  12. ///动态创建一个div
  13. $(function(){
  14. $('<div />',{
  15. id:'test',
  16. text:"this is a div",
  17. "class":"warpper",
  18. click:function(){
  19. var text=$(this).text();
  20. alert(text);
  21. }
  22. }).appendTo("body");
  23. });
  24. //创建input:text
  25. $(function(){
  26. $('<input />',{
  27. type:"text",
  28. val:"input text somethings...",
  29. name:"userName"
  30. }).appendTo("body");
  31. });
  32. //创建input select
  33. $(function(){
  34. var slt=$('<select />',{name:"country" });
  35. $('<option />',{
  36. val:"0",
  37. text:"请选择"
  38. }).appendTo(slt);
  39. $('<option>',{
  40. val:"CN",
  41. text:"China",
  42. selected:"selected"
  43. }).appendTo(slt);
  44. $("body").append(slt);
  45. });
  46. //创建radio
  47. $(function(){
  48. $('<input />',{
  49. type:"radio",
  50. name:"rdo",
  51. checked:"checked",
  52. val:"男"
  53. }).appendTo("body");
  54. $('<label>',{
  55. text:"男",
  56. }).appendTo("body");
  57. $('<input />',{
  58. type:"radio",
  59. name:"rdo",
  60. val:"女"
  61. }).appendTo("body");
  62. $('<label>',{
  63. text:"女"
  64. }).appendTo("body");
  65. });
  66. //creat checkbox
  67. $(function(){
  68. $('<input />',{
  69. type:"checkbox",
  70. name:"cbox",
  71. val:"1",
  72. checked:"checked"
  73. }).appendTo("body");
  74. });
  75. $(function(){
  76. $('<input />',{
  77. type:"file",
  78. name:"myfile"
  79. }).appendTo("body");
  80. });
  81. //-->
  82. </script>
  83. </head>
  84. </body>
  85. </html>

复制代码

如果是js的话我们可以如下 操作

  1. var select = document.createElement("select");
  2. select.options[0] = new Option("加载项1", "value1");
  3. select.options[1] = new Option("加载项2", "value2");
  4. select.size = "2";
  5. testDiv.appendChild(select);
  6. });

复制代码

jquery利用appendTo动态创建元素的更多相关文章

  1. JavaScript 、jQuery动态创建元素的关键字~

    JavaScript动态创建元素: 1.创建元素  如:a 标签 var alink= document.createElement("a"); 2.j添加元素属性 alink.h ...

  2. js进阶---12-11、jquery如何给动态创建出来的元素绑定事件

    js进阶---12-11.jquery如何给动态创建出来的元素绑定事件 一.总结 一句话总结:通过事件委托的方式,通过on方法 1.on方法在事件绑定的时候,data方式带额外参数时,字符串参数和其它 ...

  3. 解决jquery动态创建元素绑定事件失效问题

    存在问题 在我们使用jquery动态创建元素后往往会遇到一些问题,如: 给.button按钮绑定了点击时间,执行alert:(1); 点击事件代码如下: <script>$("# ...

  4. JS、JQuery和ExtJs动态创建DOM对象

    做了个简单使用JavaScript.JQuery.ExtJs进行DOM对象创建的测试,主要是使用JavaScript.JQuery.ExtJs动态创建Table对象.动态Table数据填充.多选控制. ...

  5. 3、jquery_动态创建元素

    动态创建元素:$('<b>javier</b>') $('#Button1').append($('<b>javier</b>')) 等价于  $($( ...

  6. js学习-DOM之动态创建元素的三种方式、插入元素、onkeydown与onkeyup两个事件整理

    动态创建元素的三种方式: 第一种: Document.write(); <body> <input type="button" id="btn" ...

  7. Javascript:DOM动态创建元素实例应用

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JS动态创建元素（两种方法）

    前言 创建元素有两种方法 1)将需要创建的元素,以字符串的形式拼接:找到父级元素,直接对父级元素的innnerHTML进行赋值. 2)使用Document.Element对象自带的一些函数,来实现动态 ...

  9. jquery动态创建元素 div元素随垂直滚动条位置变化置顶显示

    刚打开页面效果 拖动滑动条之后效果 页面代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" & ...

随机推荐

  1. Java常见异常(Runtime Exception )小结（转）

    原文链接:Java常见异常(Runtime Exception )小结 Java异常体系结构呈树状,其层次结构图如图 1所示:           本文重在Java中异常机制的一些概念.写本文的目的在 ...

  2. 生成学习算法(Generative Learning algorithms)

    一.引言 前面我们谈论到的算法都是在给定\(x\)的情况下直接对\(p(y|x;\theta)\)进行建模.例如,逻辑回归利用\(h_\theta(x)=g(\theta^T x)\)对\(p(y|x ...

  3. 混沌分形之迭代函数系统（IFS）

    IFS是分形的重要分支.它是分形图像处理中最富生命力而且最具有广阔应用前景的领域之一.这一工作最早可以追溯到Hutchinson于1981年对自相似集的研究.美国科学家M.F.Barnsley于198 ...

  4. [转]使用HackCube-Special分析胎压传感器信号

    胎压无线传感器安全检测 我们团队之前也有用USRP和GNUradio对其他的胎压设备进行的安全检测,我不使用这套环境的原因是软件无线电的设备和笔记本已经算体积不小的一套设备,通常测试环境都在户外,在这 ...

  5. tfjob的一篇文章，跟公司内使用方式类似

    可以看一下这篇文章: https://yq.aliyun.com/articles/600601?spm=a2c4e.11153940.blogcont602109.12.2e241125zH1kNB

  6. MultipleRegularExpressionAttribute MVC中扩展自定义验证规则

    好久都没有写博客,最近工作中没有什么可写的,公司的项目是以业务为重,技术含量实在不咋的.这次sprint中有一个要求就是password必须一些规则,比如给你一些正则表达式必须满足几个,直接看效果吧 ...

  7. 2018.08.28 ali 梯度下降法实现最小二乘

    - 要理解梯度下降和牛顿迭代法的区别 #include<stdio.h> // 1. 线性多维函数原型是 y = f(x1,x2,x3) = a * x1 + b * x2 + c * x ...

  8. Windows server 2012 R2 与 Windows 2016 的双系统重启选项

    一台主机上,同时安装了Windows 2012R2还有Windows 2016, 但是如何能在任意一个系统重启到另一个呢? 下图中,在Win2012R2中,无法选择重启到2016中. 解决方案 === ...

  9. 备份VMware虚拟磁盘文件 移植到其他虚拟机

    原文:http://jingyan.baidu.com/article/a681b0de17b3173b1843468f.html 方法/步骤     第一种方法:直接复制本地主机磁盘下的虚拟磁盘文件 ...

  10. javascript中addEventListener(attachEvent)具体解释

    addEventListener 有三个參数:第一个參数表示事件名称(不含 on,如 "click").第二个參数表示要接收事件处理的函数:第三个參数为 useCapture.样例 ...