案例:無刷新評論 屬於創建對象的案例拿出來複習 創建行和單元格,添加到相應元素中,設置內容 createElement, appendChild,innerHTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <tit ...
案例:無刷新評論---屬於創建對象的案例拿出來複習
創建行和單元格,添加到相應元素中,設置內容 createElement, appendChild,innerHTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>title</title> </head> <body> <table id="tb" border="1"> <tbody id="tbd"> <tr> <td>豬豬:</td> <td>我喜歡吃肉</td> </tr> </tbody> </table> <div> 昵稱:<input type="text" value="" id="userName" /><br /> <textarea name="" id="tt" cols="30" rows="10"></textarea><br /> <input type="button" value="評論一下" id="btn" /><br /> </div> <script src="common.js"></script> <script> //獲取按鈕,註冊點擊事件 document.getElementById("btn").onclick = function () { //獲取昵稱 var userName = my$("userName"); //獲取評論 var tt = my$("tt"); //創建行 var tr = document.createElement("tr"); //行加到tbody中 my$("tbd").appendChild(tr); //創建單元格td1,並添加到行 var td1 = document.createElement("td"); tr.appendChild(td1); td1.innerHTML = userName.value; //創建單元格td2,並添加到行 var td2 = document.createElement("td"); tr.appendChild(td2); td2.innerHTML = tt.value; //清空 userName.value = ""; tt.value = ""; }; </script> </body> </html>