原生js渲染列表

分手后的思念是犯贱 2022-05-09 00:50 395阅读 0赞

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

<!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);
    			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].time + "</div></div>";
    			}
    		</script>
    	</body>
    
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，395人围观）

还没有评论，来说两句吧...

相关阅读

相关 js渲染select下拉列表数据

HTML（使用了layui） <div class="layui-form-item" style="margin-top: 15px" > ...

谁借莪１个温暖的怀抱￠/ 2024年04月18日 08:10/ 0 赞/ 82 阅读

相关 Vue.js列表渲染指令v-for

![90fc229b2fd0475995306edda89f2d18.gif][] 目录一、原理概述二、基本用法（1）v-for循环普通数组（2）v-for循

ゝ一世哀愁。/ 2024年03月23日 15:25/ 0 赞/ 107 阅读

相关【Vue.js】008-列表渲染

> 最后更新：2021年1月16日14点43分目录一、用 v-for 把一个数组对应为一组元素 1、概述 2、代码演示 3、运行结果二、在 v-for 里

小鱼儿/ 2023年10月05日 08:22/ 0 赞/ 31 阅读

相关条件渲染、列表渲染

条件渲染 1）v-if v-if 指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 true值的时候被渲染。 <h1 v-if="type">

今天药忘吃喽~/ 2023年07月13日 13:46/ 0 赞/ 26 阅读

相关 vue.js 列表渲染 v-for（十）

列表渲染：把一个数组对应为一组元素我门可以用v-for指令基于一个数组来渲染一个列表，v-for指令需要使用 item in items形式的特殊语法，其中ite

ゝ一纸荒年。/ 2023年02月22日 10:34/ 0 赞/ 3 阅读

相关 Vue.js（8）：列表渲染

一、用 `v-for` 把一个数组对应为一组元素我们可以用 `v-for` 指令基于一个数组来渲染一个列表。`v-for` 指令需要使用 `item i

深藏阁楼爱情的钟/ 2022年09月14日 09:55/ 0 赞/ 209 阅读

相关 vue.js列表渲染

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head

缺乏、安全感/ 2022年05月25日 13:39/ 0 赞/ 263 阅读

相关原生js渲染列表

做了一个简单的原生循环渲染： <!DOCTYPE html> <html> <head> <meta charset="UTF

分手后的思念是犯贱/ 2022年05月09日 00:50/ 0 赞/ 396 阅读

相关列表渲染——Vue.js

1. v-for循环遍历数组 `（1）v-for` 指令需要使用 `item in items` 形式的特殊语法 <ul id="example-1">

悠悠/ 2022年04月22日 12:38/ 0 赞/ 259 阅读

相关列表渲染与条件渲染

![file][] 作者 | Jeskson来源 | 达达前端小酒馆列表渲染与条件渲染如何渲染数组类型和对象类型的数据渲染数组⾥的所有数据相同的结构是列表渲染

我就是我/ 2021年08月19日 19:13/ 0 赞/ 551 阅读