<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
.a{
color:red;
}
.b{
color:blue;
}
</style>
<body>
<ul id="books">
<li id="">java</li>
<li>js</li>
</ul>
<input type="text" id="bookName"/>
选择颜色:<button id="red" onclick="redColor()">red</button>
<button id="blue" onclick="blueColor()">blue</button>
<button id="add" onclick="addBook()">+</button>
<button id="del">-</button>
<script>
const books=document.querySelector("#books")
const bookName=document.querySelector("#bookName")
const add=document.querySelector("#add")
const del=document.querySelector("#del")
var i=0;//判断点击的按钮
const redColor=()=>{
i=1;
}
const blueColor=()=>{
i=2;
}
const addBook=()=>{
const oElement=document.createElement('li')//创建标签
oElement.className=`lis+${i}`;//给新添加的设置class
const oText=document.createTextNode(bookName.value)//创建文本
oElement.appendChild(oText)//向元素添加子元素
books.appendChild(oElement)
bookName.value=""
if(i==1){
var a=document.getElementsByClassName(`lis+${i}`);//查找class
a[0].className="a";//设置属性
}
if(i==2){
var b=document.getElementsByClassName(`lis+${i}`);
b[0].className="b";
}
}
const delbook=()=>{
books.removeChild(books.lastElementChild)
}
add.addEventListener("click",addBook)
del.addEventListener("click",delbook)
</script>
</body>
</html>
08-11