js实现微博发布小功能
微博发布功能，可发布可删除。样式没设置忽略，主要知识点及注意点：
1、动态添加节点标签。
2、内容为空时不能发布。
3、新发布的内容要在上面。
4、内容删除要同时删除掉节点。
5、为保持样式输入框要设置为不可拖拽。
<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>Document</title>
<style>
*{margin:0;padding:0;}
.box{
border:1pxsolid#000;
width:600px;
height:auto;
margin:100pxauto;
padding:30px0;
}
textarea{
width:450px;
resize:none;
margin-left:20px;
}
ulli{
width:450px;
list-style:none;
border-bottom:1pxdotted#ccc;
margin-left:20px;
line-height:30px;
color:#333;
}
ullia{
float:right;
font-size:12px;
}
</style>
<scriptsrc="../jquery-1.11.1.min.js"></script>
<scripttype="text/javascript">
//方法1
window.onload=function(){
varbox=document.getElementById("box");
varboys=box.children;
varul=document.createElement("ul");
box.appendChild(ul);
boys[2].onclick=function(){
if(boys[1].value==""){
alert("输入不能为空");
return;
}
varnewli=document.createElement("li");
newli.innerHTML=boys[1].value+"<ahref='javascript:;'>删除</a>";
boys[1].value="";
varlis=ul.children;
if(lis.length==0){ul.appendChild(newli);}else{
ul.insertBefore(newli,lis[0]);
}
varas=document.getElementsByTagName("a");
for(vari=0;i<as.length;i++){
as[i].onclick=function(){
ul.removeChild(this.parentNode);
}
}
}
}
//方法2引用jQuery
//$(function(){
//$("<ul></ul>").appendTo("#box");
//var$text=$("#box").find("textarea");
//var$btn=$("#box").find("button");
//$btn.on("click",function(){
//if($text.val()==""){
//alert("请输入内容");
//return;
//}
//$("ul").prepend("<li>"+$text.val()+"<ahref='javascript:;'>删除</a></li>");
//$text.val("");
//$("a").on("click",function(){
//$(this).parent("li").remove();
//})
//})
//})
</script>
</head>
<body>
<divclass="box"id="box">
微博发布：</br><textareacols="30"rows="10"></textarea>
<button>发布</button>
</div>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！