【JAVASCRIPT】无刷新评论
生活随笔
收集整理的這篇文章主要介紹了
【JAVASCRIPT】无刷新评论
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
核心技術:
?①:document.createElement("") ---創建一個新元素
②:innerText ---設置元素的text屬性 (innerText會把元素之前的text覆蓋掉,需謹慎使用)
?③:appendChild -----把元素綁定到父節點
界面設計如圖:
界面代碼如下:
1 <p>評論列表:</p> 2 <table id="tablepinglun"> 3 <tr> 4 <td>小剛說:</td> 5 <td>我是凹凸曼。</td> 6 </tr> 7 </table> 8 <p> 昵稱:<input type="text" id="username" /></p> 9 <p> 評論內容:<textarea id="content" cols="20" rows="2"></textarea></p> 10 <p><input type="button" value="提交" onclick="addpinglun()" /></p>js代碼如下:
1 <script type="text/javascript"> 2 function addpinglun() { 3 var user = document.getElementById("username"); //得到用戶名框的值 4 var content = document.getElementById("content"); //得到內容 5 var tr = document.createElement("tr"); //創建一個tr 6 7 var td1 = document.createElement("td"); //創建第一個td為了顯示用戶名 8 td1.innerText = user.value + "說:"; 9 tr.appendChild(td1); //把td添加到tr節點上 10 11 var td2 = document.createElement("td"); 12 td2.innerText = content.value; 13 tr.appendChild(td2); 14 15 var tablemain = document.getElementById("tablepinglun"); //獲取table 16 tablemain.appendChild(tr); //把tr添加到table節點上 17 18 user.value = ""; //當評論完成,把昵稱和內容只用,防止重復評論 19 content.value = ""; 20 21 } 22 </script>轉載于:https://www.cnblogs.com/ngnetboy/archive/2012/08/05/2623599.html
與50位技術專家面對面20年技術見證,附贈技術全景圖總結
以上是生活随笔為你收集整理的【JAVASCRIPT】无刷新评论的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: HDU 2115 -I Love Thi
- 下一篇: dataset的用法