<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
ul{
list-style-type: none;
margin: 0;
padding: 0;
width: 260px;
/* border: solid 1px #ccc; */
}
ul>li{
padding: 5px 10px;
border-bottom: dashed 1px blue;
}
ul>li:nth-child(1){
font-weight: 700;
background-color: #ccc;
border-bottom: dashed 0px blue;
}
ul>li>span{
/* 转成块元素 */
display: inline-block;
width: 100px;
}
#add{
padding: 5px 10px;
}
#add>div>span{
display: inline-block;
width: 60px;
text-align: right;
}
#add>div{
margin: 10px 0;
}
</style>
</head>
<body>
<div id="stu">
<ul id="ul">
</ul>
</div>
<div id="add">
<div>
<span>姓名:</span>
<input type="text" id="name">
</div>
<div>
<span>年龄:</span>
<input type="text" id="age">
</div>
<div>
<span></span>
<button id="btnAdd">增加</button>
</div>
</div>
</body>
</html>
<script>
function resHtml(stu) {
var HTML = "";
HTML += '<li>'
HTML += '<span>'+stu.name+'</span>'
HTML += '<span>'+stu.age+'</span>'
HTML += '</li>'
return HTML;
}
//定义一个数组
var stu = [
{
name:'姓名',
age:'年龄'
},
{
name:'张三',
age:20
},
{
name:'小李',
age:22
},
]
function show() {
var HTML = "";
for(var i=0;i<stu.length;i++){
HTML += resHtml(stu[i])
}
document.getElementById("ul").innerHTML = HTML
}
show();
btnAdd = document.getElementById("btnAdd")
btnAdd.onclick = function () {
var _obj = {}
_obj.name = document.getElementById("name").value
_obj.age = document.getElementById("age").value
stu.push(_obj);
show()
}
</script>
