实现列表的动态增加元素,如微信朋友圈动态加载更多信息,
实现用到了 CSS,和JavaScript 核心逻辑首先用css制作出静态的菜单 1-n ,然后通过js重新实现
然后创建li标签在html中
var item = document.createElement("li");
通够for循环把数组内的内容一一遍历
item.innerText = "菜品"+(n+1);
将li内容添加到list中
list.appendChild(item);
同理 当我们点击加载跟过的时候 封装上面创建的无序列表,重新调用,然后n累加就实现了动态加载菜单小项目
//送上源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表的动态增加元素</title>
<style>
*{
padding: 0;
margin: 0;
}
#content li{
list-style: none;
border: 2px yellow solid;
width: 100%;
height: 100px;
background-color: aqua;
line-height: 100px;
text-align: center;
vertical-align: middle;
}
h2{
width: 100%;
height: 120px;
font-size: 40px;
background-color: coral;
line-height: 100px;
text-align: center;
vertical-align: middle;
}
</style>
</head>
<body>
<h2>菜品信息<h2>
<ul id="content">
</ul>
<script>
var list = document.getElementById("content");
n = 0;
for(n=0;n<20;n++){
var item = document.createElement("li");
item.innerText = "菜品"+(n+1);
list.appendChild(item);
}
var load = document.createElement("li");
load.innerText = "加载更多...";
list.appendChild(load);
load.onclick = function(){
list.removeChild(load);
for(var i=0;i<20;i++){
var newitem = document.createElement("li");
newitem.innerText = "菜品"+(n+1);
list.appendChild(newitem);
n++;
list.appendChild(load);
}
}
</script>
</body>
</html>