微博发布功能，可发布可删除。样式没设置忽略，主要知识点及注意点：

1、动态添加节点标签。

2、内容为空时不能发布。

3、新发布的内容要在上面。

4、内容删除要同时删除掉节点。

5、为保持样式输入框要设置为不可拖拽。

Document

* {margin: 0;padding: 0;}

.box{

border: 1px solid #000;

width: 600px;

height: auto;

margin:100px auto;

padding:30px 0;

}

textarea{

width: 450px;

resize:none;

margin-left: 20px;

}

ul li{

width: 450px;

list-style: none;

border-bottom: 1px dotted #ccc;

margin-left:20px;

line-height: 30px;

color: #333;

}

ul li a{

float: right;

font-size: 12px;

}

// 方法1

window.onload = function () {

var box = document.getElementById("box");

var boys=box.children;

var ul = document.createElement("ul");

box.appendChild(ul);

boys[2].onclick = function (){

if(boys[1].value==""){

alert("输入不能为空");

return;

}

var newli= document.createElement("li");

newli.innerHTML=boys[1].value+"删除";

boys[1].value ="";

var lis=ul.children;

if(lis.length==0){ul.appendChild(newli);}else{

ul.insertBefore(newli, lis[0]);

}

var as=document.getElementsByTagName("a");

for (var i=0;i

as[i].οnclick=function(){

ul.removeChild(this.parentNode);

}

}

}

}

// 方法2 引用jQuery

// $(function(){

// $("

// var $text = $("#box").find("textarea");

// var $btn = $("#box").find("button");

// $btn.on("click",function(){

// if($text.val() ==""){

// alert("请输入内容");

// return;

// }

// $("ul").prepend("

"+$text.val()+"删除");

// $text.val("");

// $("a").on("click",function(){

// $(this).parent("li").remove();

// })

// })

// })

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持脚本之家！