动态添加列表-创建、添加节点和使用事件委托
最近学到了JS的DOM操作，做了一个小练习，用到了创建、添加节点和使用事件委托等知识点。
网页显示
代码
<!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>动态添加列表-创建、添加节点和使用事件委托</title>
</head>
<body>
<button>点击</button>
<ul></ul>
<script>
// index是数组的索引，index_active是活跃状态下的索引
let index = 0;
let index_active = -1;
let arr = ["貂蝉", "西施", "昭君", "凤姐", "芙蓉姐姐", "A", "B", "C", "D"];
//获取ul，btn元素
const ul = document.querySelector("ul");
const btn = document.querySelector("button");
// fn函数：创建一个li，并在li内添加一个arr内的大美女
const fn = function () {
// 当超过数组上限时，禁用btn元素
if (index >= 9) {
btn.disabled = "disabled";
return;
}
let li = document.createElement("li");
li.innerHTML = `${arr[index++]}`;
ul.appendChild(li);
}
// 初始化4个元素
for (let i = 0; i < 4; i++) {
fn();
}
// 点击一个btn，添加一个arr内的大美女
btn.onclick = fn;
//点击ul内的li，使li处于“被选中”状态，红色显示
ul.onclick = function (e) {
if (index_active !== -1) {
// 将上一个活跃的大美女打入冷宫
ul.children[index_active].style.backgroundColor = "";
}
//标记新的活跃的大美女，并红色显示
index_active = arr.indexOf(e.target.innerText)
e.target.style.backgroundColor = "red";
// console.log(index);
}
</script>
</body>
</html>
228
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
