HTML代码段
<div id="box">
<div class="box-top">
<label>发表评论</label>
<textarea id="my-textarea" cols="60" rows="10"></textarea>
<button id="btn">发表</button>
</div>
<ul id="ul">
</ul>
</div>
JS代码段
<script>
window.onload = function () {
// 1.监听按钮点击
$('btn').onclick= function () {
// 1.1 获取用户输入内容
var content = $('my-textarea').value;
// console.log(content);
//1.2判断
if (content.length === 0){
alert("请输入评论内容!");
return;
}
// 1.3创建li标签放入ul
var li= document.createElement('li');
li.innerHTML = content + '<a href="javascript:;">删除<a>';
// 加入到ul中
$('ul').appendChild(li);
// 1.3后写入的置顶
$('ul').insertBefore(li,$('ul').children[0]);
// 1.4清楚输入框的内容:使content中的value为0
$('my-textarea').value = '';
// 1.5 删除评论,遍历a标签,监听a标签的点击
var as = $('ul').getElementsByTagName('a');//首先获取ul中的a标签
//遍历标签
for(var i = 0;i<as.length;i++){
var a = as[i];
//监听事件
a.onclick = function () {
// aleart(9);
// 1.6获取父标签,删除
this.parentNode.remove();
}
}
}
};
function $(id) {
return typeof id==="string"? document.getElementById(id) : null;
}
</script>