jQuery动态生成html元素的几种方法

最新推荐文章于 2025-04-07 01:06:28 发布

joe_dev

最新推荐文章于 2025-04-07 01:06:28 发布

阅读量8.4k

点赞数 2

分类专栏： jQuery 文章标签： jQuery

jQuery 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了使用jQuery动态创建HTML元素的三种方法：直接通过jQuery创建并追加元素、利用数组遍历生成HTML字符串后再追加，以及使用自定义模板生成元素。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文实例讲述了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() { 
  
       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 

 
 <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>