原⽣js渲染列表做了⼀个简单的原⽣循环渲染:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title>
<style type="text/css">
.id-w {
width: 100%;
height: 60px;
border: 1px solid #ccc;
display: flex;
justify-content: space-around;
align-items: center;
}
</style>
</head>
<body>
<div id="main">
<div id="" class="id-w">
<div id="">昵称</div>
<div id="">时间</div>
</div>
</div>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
var list = [{
name: "⼩张",
time: "12:22"
},
{
name: "⼩刘",
time: "12:22"
},
{
name: "⼩李",
time: "12:22"
},
{
name: "⼩孙",
time: "12:22"
},
{
name: "⼩周",
原生js和js的区别time: "12:22"
},
]
var cent = ElementById("main");
console.log(cent);
for(var i = 0; i < list.length; i++) {
cent.innerHTML += "<div id='' class='id-w'>" +
"<div id=''> " + list[i].name + "</div>" +
"<div id=''> " + list[i].name + "</div>" + "<div id=''>" + list[i].time + "</div></div>"; }
</script>
</body>
</html>
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论