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

来源：互联网发布：淘宝服务器架构设计编辑：程序博客网时间：2024/06/07 01:12

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

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

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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<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() {
      vardata = ["a","b","c","d"];
      varhtml = '';
      for(vari = 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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<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() {
      vara = buildHTML("a","我是由模版生成的", {
        id:"myLink",
        href:"http://www.baidu.com"
      });
  
      $('#wrap1').append(a);
  
      varinput = 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;
      }
      varh = '<'+ tag;
      for(attr inattrs) {
        if(attrs[attr] === false)continue;
        h += ' ' + attr + '="'+ attrs[attr] + '"';
      }
      returnh += html ? ">"+ html + "</"+ tag + ">": "/>";
    };
  </script>
</head>
<body>
  <div id="wrap1"></div>
  <div id="wrap2"></div>
</body>

运行效果如下图所示：

0 0