<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
* {
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 {
width: 450px;
line-height: 30px;
border-bottom: 1px dashed #ccc;
margin-left: 80px;
}
.box li a {
float: right;
}
</style>
</head>
<body>
<div class="box">
微博发布：<textarea name="" id="" cols="30" rows="10"></textarea>
<button>发送</button>
</div>
</body>
<script>
var btn=document.getElementsByTagName('button')[0];
var txt=document.getElementsByTagName('textarea')[0];
var ul=document.createElement('ul');//创建ul
btn.parentNode.appendChild(ul);//追加到他的父亲里面
btn.onclick=function(){
if(txt.value==''){
alert('输出不能为空');
return false; //终止函数执行
}
var newli=document.createElement('li');
newli.innerHTML=txt.value+"<a href='javascript:;'>删除</a>"; //把表单的值给新li
txt.value='';//清空表单
var lis=ul.children;//获得有多少个li
//if else这个片段让我们新发布的内容最上显示
//第一次创建
if(lis.length==0){
ul.appendChild(newli);//ul的后面追加
}else{
ul.insertBefore(newli,lis[0]);//每次生成的新的li放到第一个li的前面
}
var as=document.getElementsByTagName('a');//获得新的a标签
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
//removeChild
ul.removeChild(this.parentNode);//ul 他的爸爸
//a 的爸爸是li
}
}
}
</script>
</html>
网友评论