js创建添加节点删除留言案例

留言案例JavaScript添加删除dom操作。

1.    <textarea name="" id="" cols="30" rows="10"></textarea>
   
2.     <button>发布</button>
   
3.     <ul></ul>
   
4.     <script>
   
5.         var text = document.querySelector('textarea');
   
6.         var btn = document.querySelector('button');
   
7.         var ul = document.querySelector('ul');
   
8.         btn.onclick = function() {
   
9.             //添加li
   
10.             var li = document.createElement('li');
    
11.             if (!text.value) {
    
12.                 alert('请输入内容');
    
13.             } else {
    
14.                 li.innerHTML = text.value + '<a href="javascript:;">删除</a>';
    
15.                 ul.insertBefore(li, ul.children[0]); //这里要注意添加元素不需要" " ;
    
16.                 var as = document.querySelectorAll('a');
    
17.                 for (var i = 0; i < as.length; i++) {
    
18.                     as[i].onclick = function() {
    
19.                         ul.removeChild(this.parentNode);
    
20.                     }
    
21.                 }
    
22.             }
    
23.         }
    
24.     </script>

复制代码