服务器之家

服务器之家 > 正文

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

时间:2021-03-09 16:42     来源/作者:jQuery教程网

本文实例讲述了jQuery动态创建html元素的常用方法,在使用jQuery进行WEB程序设计的时候非常有用。分享给大家供大家参考。具体方法如下:

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

运行效果如下图所示:

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

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 () {
      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>

运行效果如下图所示:

jQuery动态创建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 () {
      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>

运行效果如下图所示:

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

相信本文所述对大家使用jQuery进行WEB程序设计有一定的借鉴价值。

相关文章

热门资讯

2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全
2020微信伤感网名听哭了 让对方看到心疼的伤感网名大全 2019-12-26
yue是什么意思 网络流行语yue了是什么梗
yue是什么意思 网络流行语yue了是什么梗 2020-10-11
Intellij idea2020永久破解,亲测可用!!!
Intellij idea2020永久破解,亲测可用!!! 2020-07-29
背刺什么意思 网络词语背刺是什么梗
背刺什么意思 网络词语背刺是什么梗 2020-05-22
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总
苹果12mini价格表官网报价 iPhone12mini全版本价格汇总 2020-11-13
返回顶部