1 先写出添加 删除 修改 三个按键
<ul></ul>
<input type="button" name="add" id="add" value="添加" />
<input type="button" name="a1" id="a1" value="删除" />
<input type="button" name="a2" id="a2" value="更新" />
2 添加功能
var ul=document.querySelector("ul")
// 设置函数添加
function add(){
// 输入框
var num=prompt("请输入要添加的内容")
// 增加新的li节点
var li=document.createElement("li")
// 把输入框的内容num放到新增的li里
li.innerHTML=num
// 把li放入ul里
ul.appendChild(li)
}
然后设置添加按键的点击事件
<input type="button" name="add" id="add" value="添加" onclick="add()" />
3 删除功能
function del(){
// 输入框获取我们要删的一行也就是li的位置或者下标+1的位置
var a22=parseInt(prompt("你要删除那一行"))
// 查询所有li
var li=document.querySelectorAll("li")
// 如何删除的一行大于li的数量
if(a22>li.length){
alert("查无次行")
}else{
// 如果小于移除我们要删除 li[a22-1]就是从所有的li中找到我们要删除的一行
ul.removeChild(li[a22-1])
}
设置删除功能点击事件
<input type="button" name="a1" id="a1" value="删除" onclick="del()" />
3 修改功能
function up(){
// var li=document.querySelectorAll("li")
//输入框
var num=parseInt(prompt("请输入你要更新的行数"))
// 查询所有li
var liu=document.querySelectorAll("li")
// 判断
if(num>liu.length){
alert("查无次行")
}else{
// 输入要更改的内容
var un=prompt("请输入你要更改的内容")
// 获取我们要改内容的一行
var li=document.querySelectorAll("li")[num-1]
// 把内容添加
li.innerHTML=un
}
给修改按键增加点击事件
<input type="button" name="a2" id="a2" value="更新" onclick="up()"/>
4效果展示