可以通过以下几种方式动态创建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>

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

□ 先把内容放到数组中，然后遍历数组拼接成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:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

□ 使用模版生成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:   

.csharpcode, .csharpcode pre
{
font-size: small;
color: black;
font-family: consolas, "Courier New", courier, monospace;
background-color: #ffffff;
/*white-space: pre;*/
}
.csharpcode pre { margin: 0em; }
.csharpcode .rem { color: #008000; }
.csharpcode .kwrd { color: #0000ff; }
.csharpcode .str { color: #006080; }
.csharpcode .op { color: #0000c0; }
.csharpcode .preproc { color: #cc6633; }
.csharpcode .asp { background-color: #ffff00; }
.csharpcode .html { color: #800000; }
.csharpcode .attr { color: #ff0000; }
.csharpcode .alt
{
background-color: #f4f4f4;
width: 100%;
margin: 0em;
}
.csharpcode .lnum { color: #606060; }

 

参考资料

※ Building HTML in jQuery and JavaScript

动态创建html元素的几种方法的更多相关文章

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

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

  2. jquery 动态创建的元素，绑定事件无效之解决方法

    今天遇到一个问题,动态创建的元素,绑定事件无效,如下: js 代码如下: var OaddX = $('.detright div.duibi div.duibox ul li span'); // ...

  3. .net中创建xml文件的两种方法

    .net中创建xml文件的两种方法 方法1:根据xml结构一步一步构建xml文档,保存文件(动态方式) 方法2:直接加载xml结构,保存文件(固定方式) 方法1:动态创建xml文档 根据传递的值,构建 ...

  4. jQuery 绑定事件到动态创建的元素上

    在进入主题之前,我们先来看一个前台页面经常用到的功能:点击页面输入框时自动选择其中文本. 很容易想到利用输入框的focus事件,当输入框获得焦点时,再调用jQuery的select()方法. Okay ...

  5. JS 动态加载脚本的4种方法

    有时候我们需要动态的加入适合的js,因为有时候不需要将所有的js都加载进来,以来提高效率,但这种方法比较适合单个js文件比较大的情况 如果js文件都比较小,还是一个js好,这样可以减少连接数.下面是4 ...

  6. jQuery动态创建html元素的常用方法汇总

    在使用jQuery进行WEB程序设计的时候非常有用.分享给大家供大家参考.具体方法如下: 一般来说,可以通过以下几种方式动态创建html元素: 1.使用jQuery创建元素的语法 2.把动态内容存放到 ...

  7. 用css隐藏元素的5种方法

    .green { width: 100px; height: 100px; background-color: #a0ee00; text-align: center; float: left; ma ...

  8. 深入理解脚本化CSS系列第六篇——脚本化伪元素的6种方法

    × 目录 [1]动态样式 [2]CSS类[3]setAttribute()[4]CSSRule对象添加[5]空样式覆盖[6]CSSRule对象删除 前面的话 我们可以通过计算样式来读取伪元素的样式信息 ...

  9. jquery动态创建页面元素

    jquery用$()方法动态创建一个页面元素,例如: var $div=$("<div title='动态创建页面元素'>欢迎创建一个新的div</div>" ...

随机推荐

  1. 搜索入门之dfs--经典的迷宫问题解析

    今天来谈一下dfs的入门,以前看到的dfs入门,那真的是入门吗,都是把dfs的实现步骤往那一贴,看完是知道dfs的步骤了,但是对于代码实现还是没有概念.今天准备写点自己的心得,真的是字面意思--入门. ...

  2. **CI中使用IN查询(where_in)

    注意别漏了$this->db->get(); /** * 匹配用户手机号,返回匹配的用户列表 * @param $column_str 'user_id, user_name, user_ ...

  3. nginx-request_time和upstream_response_time

    1.request_time 官网描述:request processing time in seconds with a milliseconds resolution; time elapsed ...

  4. SQL之PROCEDURE（存储过程）

    先来看一小段代码 create procedure pr_bank(@bank_id int) as BEGIN select *from bank where bank_ID = @bank_id ...

  5. CF GYM100548 （相邻格子颜色不同的方案数 2014西安现场赛F题 容斥原理）

    n个格子排成一行,有m种颜色,问用恰好k种颜色进行染色,使得相邻格子颜色不同的方案数. integers n, m, k (1 ≤n, m ≤ 10^9, 1 ≤ k ≤ 10^6, k ≤ n, m ...

  6. Linux 下用 smartd 监测硬盘状况

    https://blog.csdn.net/hanxuehen/article/details/6024826

  7. 【LOJ】#2542. 「PKUWC2018」随机游走

    题解 虽然我知道minmax容斥,但是--神仙能想到把这个dp转化成一个一次函数啊= = 我们相当于求给定的\(S\)集合里最后一个被访问到的点的时间,对于这样的max的问题,我们可以用容斥把它转化成 ...

  8. LoadRunner参数化取值与连接数据库

    LoadRunner参数化取值与连接数据库   LoadRunner在使用参数化的时候,通常都是需要准备大数据量的,也因此LoadRunner提供两种参数化取值方式,一种是手动编辑,另一种就是通过连接 ...

  9. Java人员正确使用 IntelliJ IDEA的方式

    原文: http://tengj.top/2017/02/22/idea1-1/ 作者: 嘟嘟MD 前言 博主是Java开发人员,以前一直都用myeclipse来开发的,说实话感觉myeclipse毫 ...

  10. HTTP协议－－请求与响应

    1.简介 HTTP 是一个属于应用层的面向对象的协议,由于其简捷.快速的方式,适用于分布式超媒体信息系统.它于1990 年提出,经过几年的使用与发展,得到不断地完善和扩展.目前在WWW 中使用的是HT ...