可以通过以下几种方式动态创建html元素：
1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版

□ 使用jQuery动态创建元素追加到jQuery对象上。

   1:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   2:      <title></title>
   3:      <script src="Scripts/jquery-1.10.2.js"></script>
   4:      <script type="text/javascript">
   5:          $(function() {
   6:              $('<input />', {
   7:                  id: 'cbx',
   8:                  name: 'cbx',
   9:                  type: 'checkbox',
  10:                  checked: 'checked',
  11:                  click: function() {
  12:                      alert("点我了~~");
  13:                  }
  14:              }).appendTo($('#wrap'));
  15:          });
  16:      </script>
  17:  </head>
  18:  <body>
  19:      <div id="wrap"></div>
  20:  </body>

□ 先把内容放到数组中，然后遍历数组拼接成html

   1:  <head>
   2:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   3:      <title></title>
   4:      <script src="Scripts/jquery-1.10.2.js"></script>
   5:      <style type="text/css">
   6:          table {
   7:              border: solid 1px red;
   8:              border-collapse: collapse;
   9:          }
  10:   
  11:          td {
  12:              border: solid 1px red;
  13:          }
  14:      </style>
  15:      <script type="text/javascript">
  16:          $(function () {
  17:              var data = ["a", "b", "c", "d"];
  18:              var html = '';
  19:              for (var i = 0; i < data.length; i ++) {
  20:                  html += "<td>" + data[i] + "</td>";
  21:              }
  22:              $("#row").append(html);
  23:          });
  24:      </script>
  25:  </head>
  26:  <body>
  27:      <table>
  28:          <tr id="row"></tr>
  29:      </table>
  30:  </body>
  31:  </html>
  32:

□ 使用模版生成html

   1:  <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
   2:      <title></title>
   3:      <script src="Scripts/jquery-1.10.2.js"></script>
   4:      <script type="text/javascript">
   5:          $(function () {
   6:             var a = buildHTML("a", "我是由模版生成的", {
   7:                  id: "myLink",
   8:                  href: "http://www.baidu.com"
   9:             });
  10:   
  11:             $('#wrap1').append(a);
  12:   
  13:              var input = buildHTML("input", {
  14:                  id: "myInput",
  15:                  type: "text",
  16:                  value: "我也是由模版生成的~~"
  17:              });
  18:   
  19:              $('#wrap2').append(input);
  20:          });
  21:   
  22:          buildHTML = function(tag, html, attrs) {
  23:              // you can skip html param
  24:              if (typeof (html) != 'string') {
  25:                  attrs = html;
  26:                  html = null;
  27:              }
  28:              var h = '<' + tag;
  29:              for (attr in attrs) {
  30:                  if (attrs[attr] === false) continue;
  31:                  h += ' ' + attr + '="' + attrs[attr] + '"';
  32:              }
  33:              return h += html ? ">" + html + "</" + tag + ">" : "/>";
  34:          };
  35:      </script>
  36:  </head>
  37:  <body>
  38:      <div id="wrap1"></div>
  39:      <div id="wrap2"></div>
  40:  </body>
  41:

参考资料

※ Building HTML in jQuery and JavaScript

动态创建html元素的几种方法相关推荐

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

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

  2. js动态生产html元素,js 动态创建 html元素

    js 动态创建 html元素 js学习之动态创建html元素 body{margin:0;padding:0;} .sky{background:#000;width:1000;height:500p ...

  3. 创建字符设备的三种方法

    将创建字符设备的三种方法记录一下,以便以后参考. 1. 使用早期的register_chardev()方法 #include<linux/kernel.h> #include<lin ...

  4. java校验码的设计_Java动态验证码单线设计的两种方法

    1.java的动态验证码我这里将介绍两种方法: 一:根据java本身提供的一种验证码的写法,这种呢只限于大家了解就可以了,因为java自带的模式编写的在实际开发中是没有意义的,所以只供学习一下就可以了 ...

  5. 《 Python List列表全实例详解系列（四）》__列表删除元素（4种方法）删除重复元素（去重）(8种方法）

    <  Python List列表全实例详解系列(四)> __列表删除元素(4种方法)删除重复元素(去重)(8种方法) 我的技术成长&学习资料整理分享之路 我遇到问题查找资料时,经常 ...

  6. php 从数组里删除元素,PHP从数组中删除元素的四种方法实例

    PHP从数组中删除元素的四种方法实例 一.总结 一句话总结:unset(),array_splice(),array_diff(),array_diff_key() 二.PHP从数组中删除元素的四种方 ...

  7. jq追加元素的几种方法

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. JAVA中创建线程池的五种方法及比较

    之前写过JAVA中创建线程的三种方法及比较.这次来说说线程池. JAVA中创建线程池主要有两类方法,一类是通过Executors工厂类提供的方法,该类提供了4种不同的线程池可供使用.另一类是通过Thr ...

  9. JAVA输出数组元素的三种方法（for/for each/toString）

    2022_02_19学习输出数组元素的三种方法以及c语言和java中数组的不同点 方法一:for循环输出数组元素 方法二:for each循环语句 方法三:Arrays类中的toString方法 c语 ...

最新文章

  1. 做过十几年程序员，作为当今全世界顶级产品经理，出版第二部重磅作品《启示录2》...
  2. 从源码分析DEARGUI之add_input_text
  3. LMDIF_函数源码
  4. only static const integral data members can be initialized within a class
  5. ubuntu软件位置(安装位置, 运行文件位置, 缓存位置)
  6. 分布式数据库基础：分布式数据库故障
  7. IOS学习笔记之十一(包装类、description、isequal)
  8. 【objectMapper实体转换异常】 com.fasterxml.jackson.databind.exc.MismatchedInputException
  9. csv mysql_将csv的数据导入mysql
  10. js获取php单选按钮值,js如何获取radio单选框选中的值
  11. Windows server 2016远程桌面登录和修改3389端口
  12. 渗透自学（三）SQL注入（一）
  13. Google Drive（谷歌网盘）下载超大文件方法
  14. 使用Python爬取中国天气网天气数据
  15. 如何成为全栈工程师？
  16. [组图教程]：8大方法！解决CPU资源占用100%[ZT]
  17. 速腾雷达录包方法（32线）
  18. 流媒体分析之rtmp协议srs服务器数据收发
  19. 项目管理证书的含金量高吗？
  20. step 文件在sw怎么编辑_如何使用Solidworks打开Stp或Step文件_使用Solidworks打开Stp或Step文件的方法－系统城...

热门文章

  1. boost::math模块通过 Gauss 和 Gauss-Kronrod 正交的数值积分
  2. boost::math::tools::continued_fraction_b用法的测试程序
  3. boost::contract模块实现ifdef功能测试程序
  4. Boost：bind的noexcept成员函数的type ＜＞语法的测试程序
  5. ITK:全局注册两个图像（仿射）
  6. VTK：可视化算法之TubesWithVaryingRadiusAndColors
  7. Qt Creator导入3D资产Importing 3D Assets
  8. C语言实现Trie字典树 (附完整源码)
  9. 为什么构造函数不能声明为虚函数，析构函数可以，构造函数中为什么不能调用虚函数？
  10. C++加号运算符重载