<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
.div1{
width: 300px;
height: 400px;
border: 1px solid black;
}
.div2{
border-bottom: 1px solid grey;
}
.p1{
margin-left: 50px;
}
.a1{
float: right;
color: blue;
}
.input1{
float: right;
}
.div3{
display: none;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2" id="div2">
<p>李易峰:</p>
<p class="p1">大家好,我很想你们!</p>
</div>
<input type="button" class="a1" id="a1" value="回复">
<div class="div3" id="div3">
<textarea name="" id="area" cols="30" rows="10"></textarea>
<p><input type="button" value="评论" class="input1" id="input1"></p>
</div>
</div>
</body>
<script type="text/javascript">
var a1=document.getElementById("a1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
var input1=document.getElementById("input1");
a1.onclick= function () {
div3.style.display="block";//显示div
};
input1.onclick= function () {
var eleP=document.createElement("p");
var area=document.getElementById("area");
eleP.innerHTML="范范:"+area.value;
div2.appendChild(eleP);
div3.style.display="none";
area.value="";
}
</script>
</html>
