留言板（初学者使用js实现）
程序员文章站
2023-11-17 15:27:34
实现输入内容点击请留言按钮，就会在下方留言并且后面有删除选项，点击即可删除留言。 ......
代码如下：
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>留言板</title>
</head>
<body>
<input type="text"><input type="button" value="请留言">
<ul></ul>
<script>
//获取页面元素
var oinp = document.queryselectorall('input');
var oul = document.queryselector('ul');
//给按钮添加点击事件
oinp[1].onclick = function(){
//获取文本框中的内容
var str = oinp[0].value;
//创建li
var oli = document.createelement('li');
//创建文本节点
var otxt = document.createtextnode(str);
oli.appendchild(otxt);
//创建a
var oa = document.createelement('a');
oa.href = "javascript:;"//将a作为js中的按钮用，不再跳转
//设置a中的内容
oa.innerhtml = '删除';
oa.onclick = function(){
this.parentnode.parentnode.removechild(this.parentnode);
}
oli.appendchild(oa);
if(oul.firstchild){
oul.insertbefore(oli,oul.firstchild);
}else{
oul.appendchild(oli);
}
}
</script>
</body>
</html>