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

绝地灬酷狼 2021-10-29 23:16 582阅读 0赞

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

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

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

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

![复制代码][Image 1]

![复制代码][Image 1]

运行效果如下图所示：

![20149595822000.png_20148595922][]

**2.先把内容放到数组中，然后遍历数组拼接成html**

![复制代码][Image 1]

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

![复制代码][Image 1]

运行效果如下图所示：

![20149595830110.png_20148595911][]

**3.使用模版生成html**

![复制代码][Image 1]

</script> 
</head> 
<body> 
<div id=“wrap1”></div> 
<div id=“wrap2”></div> 
</body>

![复制代码][Image 1]

运行效果如下图所示：

![20149595841965.png_20148595857][]

[Image 1]: 
[20149595822000.png_20148595922]: http://files.jb51.net/file_images/article/201409/20149595822000.png?20148595922
[20149595830110.png_20148595911]: http://files.jb51.net/file_images/article/201409/20149595830110.png?20148595911
[20149595841965.png_20148595857]: http://files.jb51.net/file_images/article/201409/20149595841965.png?20148595857