JavaScript（留言板功能内附备注，每一步都很详细)
JavaScript留言板小案例：
主要运用了Js的节点操作 包含了怎么用Js动态添加，克隆，移除标签，还有怎样直接查找到对应元素的父级，还会显示对应事件，还有删除按钮
<!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>
<style>
td{
width: 100px;
}
</style>
<table id="box" border="1" cellspacing="0">
<tr>
<td>姓名</td>
<td>发表内容</td>
<td>发表时间</td>
<td>删除</td>
</tr>
<tr>
<td>王一</td>
<td>哈哈哈哈</td>
<td>2022-5-9</td>
<td>
<button onclick="remove(this)">删除</button>
</td>
</tr>
</table>
<!-- 需求，当点击发表时，获取到输入的姓名和内容，插入到table标签里 -->
姓名：<input type="text" id="bt2">
<br>内容：<textarea name="" id="bt3" cols="30" rows="10"></textarea>
<button id="bt1">发表</button>
</br>
<script>
var bt1=document.getElementById("bt1") // 找到bt1
bt1.onclick=function(){
var bt2=document.getElementById("bt2")// 定位到形容
var bt3=document.getElementById("bt3")// 定位到内容
var uname=bt2.value // 获取到姓名
var content=bt3.value // 获取到内容
var createTr=document.createElement("tr") // 创建第一个tr标签
var createTd1=document.createElement("td") // 创建第一个td标签
createTd1.innerHTML=uname // 让新创建出的第一个td标签对应所输入的姓名(uname)
createTr.appendChild(createTd1) // 把新创建的createTd1放入createTr标签中
var createTd2=document.createElement("td") // 创建第二个tr标签
createTd2.innerHTML=content // 第二个新创建的标签对应内容
createTr.appendChild(createTd2) // 把新创建的createTd1放入createTr标签中
var createTd3=document.createElement("td") // 创建第三个tr标签
var x=new Date() // 创建一个日期对象
createTd3.innerHTML=x.getFullYear()+"-"+(x.getMonth()+1)+"-"+x.getDate() // 获取系统的年，月，日期
createTr.appendChild(createTd3) // 把新创建的createTd1放入createTr标签中
var createTd4=document.createElement("td") // 第四个tr标签
createTd4.innerHTML="<button οnclick=remove(this)>删除</button>" //添加事件
createTr.appendChild(createTd4) // 把新创建的createTd1放入createTr标签中
var table=document.getElementById("box") // 找到table标签
// console.log(table)
table.appendChild(createTr) // 把新创建的createTr放入table标签中
bt2.value="" // 把发表完内容之后的input框清空
bt3.value="" // 把发表完内容之后的textarea文本域清空
}
// 第一个难点 如何给动态添加的元素添加事件
// 第二个难点 写到标签中，绑定的函数，如何获取对应的标签 (this)
// 第三个难点 如何找打对应元素 然后删除
function remove(dom){
// console.log(this) this指向的是window
// console.log(dom)
var par=dom.parentNode.parentNode // 找到要被删除的元素
var table=par.parentNode // 找到要被删除元素的父级
table.removeChild(par) // 在被删除元素的父级中删除这个元素
}
</script>
</body>
</html>