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

来源：互联网发布：c语言简单编程编辑：程序博客网时间：2024/06/07 04:46

一般来说，可以通过以下几种方式动态创建html元素：

1、使用jQuery创建元素的语法
2、把动态内容存放到数组中，再遍历数组动态创建html元素
3、使用模版

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

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <script src="Scripts/jquery-1.10.2.js"></script>  <script type="text/javascript">    $(function() {      $('<input />', {        id: 'cbx',        name: 'cbx',        type: 'checkbox',        checked: 'checked',        click: function() {          alert("点我了~~");        }      }).appendTo($('#wrap'));    });  </script></head><body>  <div id="wrap"></div></body>

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

<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <script src="Scripts/jquery-1.10.2.js"></script>  <style type="text/css">    table {      border: solid 1px red;      border-collapse: collapse;    }      td {      border: solid 1px red;    }  </style>  <script type="text/javascript">    $(function () {      var data = ["a", "b", "c", "d"];      var html = '';      for (var i = 0; i < data.length; i ++) {        html += "<td>" + data[i] + "</td>";      }      $("#row").append(html);    });  </script></head><body>  <table>    <tr id="row"></tr>  </table></body></html>

3.使用模版生成html

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>  <title></title>  <script src="Scripts/jquery-1.10.2.js"></script>  <script type="text/javascript">    $(function () {      var a = buildHTML("a", "我是由模版生成的", {        id: "myLink",        href: "http://www.baidu.com"      });        $('#wrap1').append(a);        var input = buildHTML("input", {        id: "myInput",        type: "text",        value: "我也是由模版生成的~~"      });        $('#wrap2').append(input);    });      buildHTML = function(tag, html, attrs) {      // you can skip html param      if (typeof (html) != 'string') {        attrs = html;        html = null;      }      var h = '<' + tag;      for (attr in attrs) {        if (attrs[attr] === false) continue;        h += ' ' + attr + '="' + attrs[attr] + '"';      }      return h += html ? ">" + html + "</" + tag + ">" : "/>";    };  </script></head><body>  <div id="wrap1"></div>  <div id="wrap2"></div></body>

以上来自：http://www.jb51.net/article/54815.htm

阅读全文

0 0