回复评论

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

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>

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>

</body>

</html>