JavaScript强化教程-列表的动态增加元素

来源：互联网发布：网易smtp服务器端口编辑：程序博客网时间：2024/04/26 18:18

获得更多--JavaScript强化教程

实现列表的动态增加元素，如微信朋友圈动态加载更多信息，

实现用到了 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>

0 0