随笔 - 432  文章 - 0  评论 - 15  阅读 - 63万

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   狼来了  阅读(10029)  评论(0编辑  收藏  举报
编辑推荐:
· 没有源码,如何修改代码逻辑?
· 一个奇形怪状的面试题:Bean中的CHM要不要加volatile?
· [.NET]调用本地 Deepseek 模型
· 一个费力不讨好的项目,让我损失了近一半的绩效!
· .NET Core 托管堆内存泄露/CPU异常的常见思路
阅读排行:
· DeepSeek “源神”启动!「GitHub 热点速览」
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· C# 集成 DeepSeek 模型实现 AI 私有化(本地部署与 API 调用教程)
· DeepSeek R1 简明指南:架构、训练、本地部署及硬件要求
· NetPad:一个.NET开源、跨平台的C#编辑器
< 2025年2月 >
26 27 28 29 30 31 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 1
2 3 4 5 6 7 8

点击右上角即可分享
微信分享提示