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