<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>留言板</title>
</head>
<style type="text/css">
*{
list-style: none;
}
</style>
<body>
<ul id="items"></ul>
<textarea name="" id="text" cols="30" rows="10"></textarea>
<button id="btn">点击留言</button>
</body>
<script type="text/javascript">
btn.onclick=function(){
//点击事件
var li=document.createElement("li");
//创建li
var val=text.value;
//var一个用来放文本域的内容
var span=document.createElement("span");
//创建span标签
items.appendChild(li)
//li放进ul里面
li.appendChild(span)
//span放进li里面
span.innerHTML=val;
//span的内容等于val
text.value=""
//文本域的内容放进span里面,文本域的值清空
var sc=document.createElement("button")
//创建一个按钮
sc.innerHTML="删除";
//按钮名字
li.appendChild(sc)
//按钮插入到li里面
sc.onclick=function(){
//点击事件
items.removeChild(li)
//ul删除li文本内容
}
var xg= document.createElement("button");
//在创建一个修改内容
li.appendChild(xg)
// 按钮插入到li里面
xg.innerHTML="修改"
xg.onclick=function(){
//点击修改按钮。span内容为空
span.innerHTML=""
var model=prompt("请输入修改内容")
//弹出弹框,输入修改内容
span.innerHTML=model
//span的新内容等于输入的内容
}
}
</script>
</html>