<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title
</title>
</head>
<style>
*{
margin:
0;
padding:
0;
}
ul{
list-style:
none;
margin:
20px 80px;
}
ul li{
border-bottom:
1px dashed #999999;
}
.box{
width:
600px;
margin:
100px auto;
border:
1px solid #333333;
}
.txtarea{
margin:
30px auto;
}
.txtarea textarea{
width:
450px;
height:
100px;
resize:
none;
}
li a{
float:
right;
}
</style>
<script>
window.onload
= function () {
var btn = document.getElementById("btn");
var text = document.getElementById("textt");
var txt = document.getElementById("txtt");
var ul = document.createElement("ul");
btn.onclick
= function () {
if(txt.value == ""){
alert("输入内容不能为空");
return false;
}else{
text.parentNode
.appendChild(ul);
var li = document.createElement("li");
li.innerHTML
= txt.value+"<a href='javascript:;'>删除</a>";
txt.value = "";
var lis = ul.children
;
if(lis.length
== 0){
ul.appendChild(li);
}else{
ul.insertBefore(li,lis[0]);
}
}
var as = ul.getElementsByTagName("a");
for(var i=0;i<as.length
;i++){
as[i].onclick = function () {
ul.removeChild(this.parentNode);
}
}
};
}
</script>
<body>
<div class="box">
<div class="txtarea" id="textt">
微博状态：<textarea id="txtt"></textarea> <button id="btn">发布</button>
</div>
</div>
</body>
</html>
步骤分析：
第一步：创建ul盒子容纳评论li标签；
第二步：添加btn点击事件将评论内容赋值给li标签并添加ul中，注意的是li标签的添加顺序以及textarea中评论的自动删除；
第三步：添加删除评论事件
转载请注明原文地址: https://www.6miu.com/read-2614142.html
