<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
ul{
list-style-type: none;
}
.box{
margin: 100px auto;
width: 600px;
height: auto;
border: 1px solid #333;
padding: 30px 0;
}
textarea{
width: 450px;
resize: none;
}
.box li{
line-height: 25px;
margin-left: 60px;
width: 452px;
}
ul li a{
float: right;
}
</style>
<script>
window.onload = function() {
var butto = document.getElementById("butto");
var ul = document.getElementById("ul");
butto.onclick = function() {
var tex = document.getElementById("tex");
var hml = tex.value;
//alert(hml);
if(hml != null && hml != '' && hml != undefined){
var li = document.createElement("li");
var lis = document.getElementsByTagName("li");
li.innerHTML = hml+"<a href='javascript:;'>删除</a>";
//ul.appendChild(li);
ul.insertBefore(li,lis[0]); //后发布的放到前边
tex.value = "";
}
//删除操作
var as = document.getElementsByTagName("a");
for(var i=0;i<as.length;i++){
as[i].onclick = function() {
ul.removeChild(this.parentNode); //删除ul中的li
}
}
}
}
</script>
</head>
<body>
<div class="box">
评论发布<textarea id = "tex" ></textarea><button id="butto">发布</button>
<ul id="ul">
</ul>
</div>
</body>
</html>
172
评论
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
查看更多评论
添加红包
