<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>回复评论</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
600px;
border: 1px solid #aaa;
padding: 20px 10px;
margin: 100px auto;
font-size: 12px;
}
#plTxt{
450px;
resize: none;/*防止用户拖拽textarea*/
}
.box ul{
list-style: none;
}
.box ul li{
450px;
line-height: 30px;
border-bottom: 1px dotted #aaa;
margin-left: 65px;
}
.box ul li a{
color: #aaa;
text-decoration: none;
float: right;
}
.box ul li .time{
color: #4f0;
float: right;
}
</style>
<script type="text/javascript">
function $id(id){
return document.getElementById(id);
}
function $tag(tag, objDom){
if (objDom) {
return objDom.getElementsByTagName(tag);
}
else{
return objDom.getElementsByTagName(tag);
}
}
//window.onload = function(){
//1.第一种创建动态的方法
//var btn = document.getElementById('btn');
//btn.onclick = function(){
//var txt = document.createElement('p');
//txt.innerHTML = '我骄傲'；
//var box = document.getElementById('box');
//var old = document.getElementById('old');
//box.insertBefore(txt, old);
//}
//}
window.onload = function(){
//1.动态创建评论的容器ul对象
var ul = document.createElement('ul');
//2.把ul追加到box中
$id('pl').append(ul);
//3.给按钮注册事件
$id('btn').onclick = function(){
//4.获取文本域中的字符串
var str = $id('plTxt').value;
if (str.length <= 0) {
alert('不能发表空评论')
}else{
//5.动态创建li标签
var newLi = document.createElement('li');
//6.拼写li标签中的innerHTML
var time = new Date().toLocaleTimeString();
var inHtml = str + '<span class="time">' + time + '</span><a href="javascript:void(0)">删除</a>';
//7.设置Li的内容
newLi.innerHTML = inHtml;
//8.把li标签，动态追加到ul容器中
ul.append(newLi);
//清空文本域
$id('plTxt').value = '';
/* 完成删除评论*/
//9.要给动态创建出来的a删除标签，注册onclick事件
//9.1要先找到对应的a的DOM对象，从动态创建的newLi上，直接可以找到当前这个a标签
var aDom = newLi.getElementsByTagName('a')[0];
aDom.onclick = function(){
//9.2获取当前要删除掉的li
var li = this.parentNode;
//9.3删除li
ul.removeChild(li);
}
}
}
}
</script>
</head>
<body>
<div class="box" id="pl">
<span>发表评论：</span>
<textarea name="" id="plTxt" cols="30" rows="10"></textarea>
<input type="button" value="评论" id="btn"/>
</div>
</body>
</html>