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

在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下：

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

运行效果如下图所示：

posted on 2015-02-17 10:02 狼来了阅读(10017) 评论(0) 编辑收藏举报