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

    最近在做把matlab代码转成python代码,没有用过matlab,python也只是局限于爬虫,所以.... matlab与python最大的不同是,matlab的下标是从1开始的,python和 ...

  2. 【直播预告】云栖直播：阿里热修复产品HotFix2.0升级详解

    全面——你知道吗?1891年,卡尔森纳做出的第一把瑞士军刀,只有螺丝刀和开罐器.经过一代又一代能工巧匠的打磨,这把刀陆续增加了锯子.剪刀.镊子.放大镜.改锥,甚至内藏激光.LED手电筒.USB记忆碟等 ...

  3. Spring MVC之JSON数据交互和RESTful的支持

    1.JSON概述 1.1 什么是JSON JSON(JavaScript Object Notation,JS对象标记)是一种轻量级的数据交换格式.它是基于JavaScript的一个子集,使用了C.C ...

  4. Spark（十二）SparkSQL简单使用

    一.SparkSQL的进化之路 1.0以前:   Shark 1.1.x开始:SparkSQL(只是测试性的)  SQL 1.3.x:          SparkSQL(正式版本)+Datafram ...

  5. Ionic Js二十：选项卡栏操作

    ion-tabs ion-tabs 是有一组页面选项卡组成的选项卡栏.可以通过点击选项来切换页面. 对于 iOS,它会出现在屏幕的底部,Android会出现在屏幕的顶部(导航栏下面). 用法 < ...

  6. ECSHOP的JS文件代入问题

    参考一下默认的js写法就行了<script type='text/javascript' src='themes/ecmoban/js/jquery-1.7.2.min.js'></ ...

  7. [python selenium] 操作方法整理

    个人笔记,摘抄自虫师python selenum,仅供个人参考 1.安装: pip install selenium 下载webdriver # webdriver 下载并放置在python主目录 · ...

  8. caffe 中 plot accuracy和loss, 并画出网络结构图

    plot accuracy + loss 详情可见:http://www.2cto.com/kf/201612/575739.html 1. caffe保存训练输出到log 并绘制accuracy l ...

  9. Hadoop整理一（初识Hadoop）

    一.要点 1.Hadoop目的是让多台计算机同时解决一个问题 2.HDFS(Hadoop Distributed File System 分布式存储系统)是一个分布式文件系统,有目录,目录下可以存储文 ...

  10. react篇章-React State(状态)-将生命周期方法添加到类中

    将生命周期方法添加到类中 在具有许多组件的应用程序中,在销毁时释放组件所占用的资源非常重要. 每当 Clock 组件第一次加载到 DOM 中的时候,我们都想生成定时器,这在 React 中被称为挂载. ...