簡易留言板
阿新 • • 發佈：2018-06-16
img parent rip display inpu round script isp lap 
編輯本博客
- this.value獲取表單控件值
- this.appendChild()為標簽添加子標簽
- this.getElementsByTagName()通過標簽名獲取所有標簽，this.length統計長度，[0]取第一個元素
- this.insertBefore()，在一個元素之前插入新元素
- this.parentNode獲取父節點
- this.removeChild()移除子節點
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <titleView Code>簡易留言板</title> </head> <body> <h4>YY留言板</h4> <div id="box"> </div> <textarea id="msg"></textarea> <input type="button" id="btn" value="留言"> <button type="button" onclick="count()">統計留言數</button> </body><script type="text/javascript"> var ul=document.createElement("ul"); var box=document.getElementById("box"); box.appendChild(ul); var counts=0; var btn=document.getElementById(‘btn‘); var msg=document.getElementById(‘msg‘) btn.onclick=function (ev) { var content=msg.value; var li=document.createElement(‘li‘) li.innerHTML=content+"<span> X</span>"; var lis=document.getElementsByTagName("li"); if(lis.length==0){ ul.appendChild(li); counts++; }else { ul.insertBefore(li,lis[0]); counts++; } msg.value=""; //添加li標簽後動態給設置onclick屬性 var spans=document.getElementsByTagName("span"); for(i=0;i<spans.length;i++){ spans[i].onclick=function () { ul.removeChild(this.parentNode); counts--; } } }; function count() { alert("一共發布了"+counts+"條留言"); }; </script> </html>
簡易留言板