JavaScript實現動態留言板
阿新 • • 發佈:2020-03-17
本文例項為大家分享了簡單動態留言板的建立,供大家參考,具體內容如下
效果圖展示:
思路
html程式碼
<textarea name="" id="" cols="30" rows="10"></textarea> <button>發表留言</button> <ul></ul>
css程式碼
<style> * { margin: 0; padding: 0; } body { padding: 100px; } textarea { width: 200px; height: 100px; border: 1px solid #000; outline: none; resize: none; } ul { margin-top: 50px; } li { width: 300px; padding: 5px; background-color: rgb(245,209,243); color: red; font-size: 14px; margin: 15px 0; } li a { float: right; width: 40px; height: 20px; text-align: center; text-decoration: none; background-color: #fff; border: 1px solid #ccc; color: #000; } </style>
js程式碼
<script> //點選按鈕之後 就動態建立一個li 新增到ul裡面 //建立li的同時 把文字域裡面的值通過li.innerHTML賦值給li //獲取元素 var text = document.querySelector('textarea'); var btn = document.querySelector('button'); var ul = document.querySelector('ul'); //建立事件 btn.onclick = function () { if (text.value == '') { return false; } else { //1.建立li var li = document.createElement('li'); //先有li 再賦值 li.innerHTML = text.value + '<a href="javascript:;" rel="external nofollow" >刪除</a>'; //2.新增li ul.appendChild(li); //在後面追加 // ul.insertBefore(li,ul.children[0]); 動態在前面追加 //3.刪除元素 刪除當前連結的li 他的父親 var as = document.querySelectorAll('a'); for(var i = 0;i<as.length;i++){ as[i].onclick = function(){ // 刪除當前a的父親li li的父親是ul //刪除節點語法 父節點.removeChild(子節點) ul.removeChild(this.parentNode); } } } } </script>
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。