<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>微博发布</title> <style type="text/css"> *{ padding: 0; margin: 0; } ul { list-style: none; } .box { 600px; height: auto; border: 1px solid #ccc; margin: 100px auto; text-align: center; padding: 30px 0; } .box textarea { 450px; resize: none; /*设置文本不能过拖动*/ } .box li { 450px; line-height: 30px; border-bottom: 1px dashed #ccc; margin-left: 80px; text-align: left; } .box li 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); btn.onclick = function (){ //1.需要判断文本中是否有内容 if(txt.value == ""){ alert("亲!内容不能为空哦!!"); return false; // 让操作就在这个地方终止 } var newli = document.createElement("li"); newli.innerHTML = txt.value +"<a href='javascript:;'>删除</a>"; ul.appendChild(newli); //清空输入框 txt.value = ""; var aa = document.getElementsByTagName("a");//获取所有的a标签 for(var i = 0;i<aa.length;i++){ aa[i].onclick = function () { this.parentNode.remove(); } } } } </script> </head> <body> <div class="box"> 微博发布:<textarea name="" id="" cols="30" rows="10"></textarea> <button>发布</button> </div> </body> </html>
当我往微博里里面添加消息之后,点击发布按钮,那么我们开始输入 的内容就会被发送出去,当我们点击发送的时候,会创建 一个无序列表ul和li标签,发送之前还会判断内容是否为空,如果为空了,将不能够发送。发送成功后,会在下面显示出来,并且会添加一个删除功能,当我们点击删除按钮时,这个内容就会消失。
document.getElementsByTagName 他的意思就是拿到制定标签名的标签。
document.createElement 创建一个标签。
newli.innerHTML = "添加内容";这句话就是给标签添加内容。
this.parentNode.remove();将 标签从父节点中移除。
btn.onclick = function (){}当我们点击按钮之后就会触发这个方法。