好久都没有来这里写东西了，经过这一段时间的沉淀，想到的东西也比较多，下面就给大家介绍一下我写的简单的留言板吧。
代码区
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>留言板</title>
<style type="text/css">
.wrap{
width: 500px;
margin: 100px auto;
}
.box{
width: 500px;
height: 300px;
background: #f4f4f4;
padding: 16px;
}
.box1{
margin-bottom: 20px;
}
.box1 input{
width: 430px;
margin-left: 10px;
height: 30px;
}
span,textarea{
vertical-align: top;
}
.box3{
width: 430px;
margin-left: 10px;
height: 30px;
height: 180px;
}
.box4{
margin-top: 10px;
}
.box4 button{
width: 60px;
height: 30px;
float: right;
}
ol{
margin: 0;
padding: 0;
list-style-type: none;
}
li{
margin-top: 20px;
}
.div1{
width: 500px;
padding: 8px 16px;
background: #ccc;
}
.div2{
width: 466px;
padding: 20px 50px 20px 16px;
background: #f4f4f4;
word-wrap:break-word;
position: relative;
}
a{
position: absolute;
text-decoration: none;
color: black;
right: 16px;
font-size: 16px;
top: 40%;
}
a:active{
color: red;
}
</style>
</head>
<body>
<div class="wrap">
<div class="box">
<div class="box1">
<form>
<label>姓名：</label>
<input required="required" type="text" name="" value="">
</form>
</div>
<div class="box2">
<span>内容：</span>
<textarea required="required" class="box3"></textarea>
</div>
<div class="box4">
<button id="btn">提交</button>
</div>
</div>
<h2>显示留言</h2>
<ol></ol>
</div>
</body>
<script type="text/javascript">
var btn=document.getElementById("btn");
var box3=document.getElementsByClassName("box3")[0];
var input=document.getElementsByTagName("input")[0];
var ol=document.getElementsByTagName("ol")[0];
btn.onclick=function(){
var val1=input.value;
var val2=box3.value;
if(val1==""||val2==""){
alert("不能为空");
}else{
var li=document.createElement("li");
ol.appendChild(li);
var div1=document.createElement("div");
li.appendChild(div1);
div1.className="div1";
var div2=document.createElement("div");
li.appendChild(div2);
div2.className="div2";
div1.innerHTML=val1;
div2.innerHTML=val2;
var box0=document.createElement("a");
div2.appendChild(box0);
box0.innerHTML="删除"
box0.href="###";
box0.onclick=function(){
box0.parentNode.parentNode.remove();
}
}
}
</script>
</html>
截图区
72E06C07-9B8A-4E07-A7D1-7BA300AA9B5C.png
这里面用到了JS里面DOM，在JS里面创建新的元素，删除元素，通过这个例子可以学习DOM更加轻松，让人更加容易了解DOM。
