效果图：
实现思路：
当发布按钮被点击时，又会分为三种情况
1.如果输入的内容为空，弹出提示：不能发布空微博
2.如果输入的文字超过120，弹出提示，微博内容不能超过120
3.正常发布微博到列表里，并清空文本域。
4.消除 '< ' 对于文本域的影响.
代码:
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 list-style:none; 11 } 12 .weibo{ 600px;border: 1px solid #ccc;margin: 100px auto;padding:10px;} 13 .weibo textarea{ 598px;height:140px;border: 1px solid #ccc;outline: none;resize: none; } 14 .weibo textarea:focus{border-color: #f40; } 15 .weibo button{ 80px;height: 30px;background: orange;color:#fff;border: 0 none;margin-top: 5px;border-radius: 3px; 16 cursor: pointer; } 17 .weibo button:hover{background-color: #f40; } 18 .weibo ul{margin-bottom: 10px;} 19 .weibo li{border-bottom: 1px dotted #ccc;overflow: hidden;font-size: 14px;line-height: 30px;} 20 .weibo li p{float: left;} 21 .weibo li span{float: right;color:#333;text-decoration: none;cursor: pointer;} 22 .weibo li span:hover{ color:#f40; } 23 </style> 24 <script> 25 window.onload = function () { 26 27 var weibobox = document.getElementById("weibo"); 28 var ul = weibobox.children[0]; 29 var text = weibobox.children[1]; 30 var btn = weibobox.children[2]; 31 32 btn.onclick = function () { 33 // 获取输入内容(去掉前后空格) 34 var value = text.value.trim(); 35 // 排除 < 字符对于文本域的影响 36 if(value.indexOf("<") != -1) { 37 value = value.replace("<", "<"); 38 } 39 // 判断输入内容是否合法 40 if(!value) { 41 alert("输入内容不能为空！") 42 }else if(value.length > 120) { 43 alert("发出的微博字数不能超过120个！") 44 }else { 45 // 创建li元素 46 var newli = document.createElement("li"); 47 // 设置li内容 48 newli.innerHTML = "<p>"+value+"</p>"; 49 // 插入li到原来li节点前面 50 ul.insertBefore(newli,ul.children[0]); 51 // 清空文本域 52 text.value = ""; 53 } 54 55 } 56 57 } 58 </script> 59 </head> 60 <body> 61 <div class="weibo" id="weibo"> 62 <ul> 63 <li><p>快来收了这九款用上就停不下来的应用吧！！</p></li> 64 <li><p>超级详细的云南大理自助游攻略</p></li> 65 <li><p>外国最近很火的舞蹈，舒服简单自然，太棒了！</p></li> 66 </ul> 67 <textarea id="text"></textarea> 68 <button id="btn">发布</button> 69 </div> 70 </body> 71 </html>