【JAVASCRIPT】无刷新评论

核心技术：

　　  ①：document.createElement("")　---创建一个新元素

　　②：innerText　　　　---设置元素的text属性　（innerText会把元素之前的text覆盖掉，需谨慎使用）　　　　　

　　  ③：appendChild　　　　-----把元素绑定到父节点

　　界面设计如图：

　　

　　界面代码如下：

    <p>评论列表：</p>
    <table id="tablepinglun">
        <tr>
            <td>小刚说：</td>
            <td>我是凹凸曼。</td>
        </tr>
    </table>
     <p> 昵称：<input type="text" id="username" /></p>
     <p> 评论内容：<textarea id="content" cols="20" rows="2"></textarea></p>
     <p><input type="button" value="提交" onclick="addpinglun()" /></p>

　　js代码如下：

    <script type="text/javascript">
        function addpinglun() {
            var user = document.getElementById("username");     //得到用户名框的值
            var content = document.getElementById("content");   //得到内容
            var tr = document.createElement("tr");      //创建一个tr

            var td1 = document.createElement("td");     //创建第一个td为了显示用户名
            td1.innerText = user.value + "说：";
            tr.appendChild(td1);            //把td添加到tr节点上

            var td2 = document.createElement("td");
            td2.innerText = content.value;
            tr.appendChild(td2);

            var tablemain = document.getElementById("tablepinglun");       //获取table
            tablemain.appendChild(tr);          //把tr添加到table节点上

            user.value = "";        //当评论完成，把昵称和内容只用，防止重复评论
            content.value = "";

        }
    </script>