原生js渲染列表

百味苦

已于 2022-04-22 17:38:30 修改

阅读量1.5w

点赞数 6

分类专栏： js，JQuery 文章标签： javascript

于 2018-09-29 10:07:23 首次发布

本文链接：https://blog.youkuaiyun.com/qq_38026437/article/details/82893434

版权

js，JQuery 专栏收录该内容

36 篇文章

订阅专栏

做了一个简单的原生循环渲染：

<!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: "小周",
					time: "12:22"
				},
			]
			var cent = document.getElementById("main");

			console.log(cent);
            var str = ''
			for(var i = 0; i < list.length; i++) {
				str += "<div id='' class='id-w'>" +
					"<div id=''> " + list[i].name + "</div>" +
					"<div id=''>" + list[i].time + "</div></div>";
			}
            cent.innerHTML = str
		</script>
	</body>

</html>

注意：js的innerHTML 是双向功能：获取对象的内容或向对象插入内容

所以不能使用+= 不然数据量大就会很卡 ,所以可以先获取所有字符串一次性赋值