首页>>表单>>原生的js无刷新评论带删除功能(2020-06-03)

原生的js无刷新评论带删除功能

原生的js无刷新评论带删除功能
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <div class="main">  
  2.     <span>你想对楼主说点什么</span>  
  3.     <span class="tag">你最多可以输入30个字符</span>  
  4.     <textarea id="text" cols="30" rows="10" maxlength="30" class="text"></textarea><br>  
  5.     <input type="button" value="发 表" id="ipt">  
  6.     <div id="txt" >  
  7.           
  8.   
  9.     </div>  
  10. </div>  

 

JavaScript Code
  1. <script>  
  2.     var ipt = document.getElementById("ipt");  
  3.     var txt = document.getElementById('txt');  
  4.     var textarea = document.getElementById("text");  
  5.     ipt.onclick = function(){  
  6.         var textValue = textarea.value.LTrim();       
  7.         textarea.value="";  
  8.         if(textValue.length>0 ){  
  9.             var divs = document.createElement("div");  
  10.             var imgs = document.createElement("img");  
  11.             var ps = document.createElement("p");  
  12.             var inputs = document.createElement("input");  
  13.             divs.setAttribute("class","creatediv");  
  14.             imgs.setAttribute('class',"createimg");  
  15.             ps.setAttribute("class","createdivs");  
  16.             inputs.setAttribute("class","createinput");  
  17.             imgs.src="pic/1.jpg";  
  18.             inputs.type="button";  
  19.             inputs.value="删除";  
  20.             ps.innerHTML=textValue;  
  21.             divs.appendChild(imgs);  
  22.             divs.appendChild(ps);  
  23.             divs.appendChild(inputs);  
  24.             if(txt.children.length==0){  
  25.                 txt.appendChild(divs);  
  26.   
  27.             }else{  
  28.                 txt.insertBefore(divs,get_firstChild(txt))  
  29.             }  
  30.             inputs.onclick = function(){  
  31.                 this.parentNode.parentNode.removeChild(this.parentNode)  
  32.             }  
  33.         }  
  34.           
  35.           
  36.   
  37.     }  
  38. </script>  

 


原文地址:http://www.freejs.net/article_biaodan_871.html