js使用两种拼接字符串的方式循环数据动态生成HTML,代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
* {
margin: 0;
padding: 0;
}
#content {
width: 500px;
margin: 0 auto;
background: pink;
}
li {
list-style: none;
width: 50%;
float: left;
height: 40px;
line-height: 40px;
border-bottom: 1px solid;
}
.clearfix:after {
content: ".";
display: block;
clear: both;
height: 0;
visibility: hidden;
}
</style>
</head>
<body>
<div id="content"></div>
</body>
</html>
<script src="jquery.min.js"></script>
<script>
let List = [{
"id": 1, "name": "a"
}, {
"id": 2, "name": "b"
}, {"id": 3, "name": "c"}];
//两种实现方式
//1、`` 模板字符串
for (let j = 0; j < List.length; j++) {
let svp = List[j];
let html1 = `<ul id="combWin-${svp.id}" class="clearfix">
<li>${svp.id}</li>
<li>${svp.name}</li>
</ul>`
$("#content").append(html1);
}
//2、拼接字符串
for (let j = 0; j < List.length; j++) {
let svp = List[j];
let html1 = "<ul id='combWin-" + svp.id + "' class='clearfix'>" +
"<li>" + svp.id + "</li>" +
"<li>" + svp.name + "</li>" +
"</ul>";
$("#content").append(html1);
}
</script>
写了简单样式,主要效果图如下: