可以通过以下几种方式动态创建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. java 添加一组元素

    在java包中的Arrays和Collection类中都有很多实用方法,可以在一个Collection中添加一组元素,Array.asList()方法接受一个数组或是一个用逗号分隔的元素列表(使用可变 ...

  2. SQL Server 2000 系统存储过程

    SQL Server 2000 系统存储过程 在 Microsoft? SQL Server? 中,许多管理和信息活动可以通过系统存储过程执行.系统存储过程按这些分类分组. 分类 描述 Active ...

  3. python 多线程删除MySQL表

    一.需求分析 在<python 统计MySQL表信息>这篇博客中,链接如下: https://www.cnblogs.com/xiao987334176/p/9901692.html 已经 ...

  4. c语言循环链表的问题

    今天,老师说了一道题,大意是,有一群小朋友10个人,但是老师只有一个苹果,只能给一个小朋友,于是老师就决定让小朋友们做成一圈,从第一个小朋友开始,每隔一个小朋友就没有机会得到苹果,最后剩下的一个人可以 ...

  5. Linux下的堆伪造漏洞利用技术(new unlink)

    感觉markdown的文件格式看起来更清晰一些就写成附加的形式了.Download 更正:这种利用方式不叫House of Mind,是我搞混了.

  6. .NETCore Sqlserver下对Dapper的扩展支持

    这里我们自定义一个IServiceCollection的扩展,例如下面我的扩展 services.AddDapperContext(dapperoptions => { dapperoption ...

  7. android拾遗——四大基本组件介绍与生命周期

    Android四大基本组件分别是Activity,Service服务,Content Provider内容提供者,BroadcastReceiver广播接收器. 一:了解四大基本组件 Activity ...

  8. bzoj 2819

    2819 思路: 手工栈: 代码: #include <bits/stdc++.h> using namespace std; #define maxn 500005 #define ma ...

  9. bzoj 1831

    思路:随便猜一猜填的数字是不下降的,反证很好证明,然后就没了.. #include<bits/stdc++.h> #define LL long long #define fi first ...

  10. 使用ASP.NET MVC+Entity Framework快速搭建系统

    详细资料: http://www.cnblogs.com/dingfangbo/p/5771741.html 学习 ASP.NET MVC 也有一段时间了,打算弄个小程序练练手,做为学习过程中的记录和 ...