【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>