<style type="text/css">
*{ padding: 0; margin: 0;}
.box{
600px;
height: auto;
border: 1px solid #333;
margin: 100px auto;
padding:30px;
}
textarea{
400px;
height: 150px;
resize:none;
}
.box ul{
list-style-type: none;
line-height: 30px;
}
li{
border-bottom: 1px dashed #333;
margin-left: 50px;
}
ul a{ float: right;}
</style>
<script type="text/javascript">
window.onload = function(){
var btn = document.getElementsByTagName("button")[0];
var txt = document.getElementsByTagName("textarea")[0];
var ul = document.createElement("ul");
btn.parentNode.appendChild(ul); //在按钮后面添加ul标签
btn.onclick=function(){
if(txt.value=="")
{
alert("内容不能为空");
return;
}
var newli = document.createElement("li"); //创建新的li
// 点发布时将txt内容转换到新添加的li中，并添加删除选项;
newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>";
txt.value=""
//将新添加的li放置在第一位
var lis=ul.children;
if(lis.length==0)
{
//如果li一个都没有，那么就把新的li添加到ul的第一个孩子
ul.appendChild(newli);
}else
{
//否则就把新的li，添加到现有的li前面
ul.insertBefore(newli,lis[0]);
}
var as=document.getElementsByTagName("a")
for(var i=0; i<as.length; i++)
{
as[i].onclick=function(){
ul.removeChild(this.parentNode)
}
}
}
}
</script>
<body>
<div class="box">
微博发布<textarea cols="20" rows="10"></textarea>
<button>发布</button>
</div>
</body>