无刷新视频评论
兩種思路，一樣的效果
方法一：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無刷新視頻評論-</title>
<script type="text/javascript">
function addComment(){
var nickname = document.getElementById('nickname').value;//獲取昵稱
var comment = document.getElementById('comment').value;//獲取評論的帖子
var tableComment = document.getElementById("tableComment");//定位到該元素
var tr = document.createElement("tr");//創建tr
var tdNickName = document.createElement("td");//創建td元素
tdNickName.innerText = nickname;//td中加入內容
tr.appendChild(tdNickName);//td放入的tr中
var tdComment = document.createElement("td");//創建td元素
tdComment.innerText = comment;//td中加入內容
tr.appendChild(tdComment);//td放入的tr中
tableComment.tBodies[0].appendChild(tr);
}
</script>
</head>
<body>
<p>評論區</p>
<table id="tableComment">
<tbody>
<tr><td>加菲貓</td><td>毛毛</td></tr>
</tbody>
</table>
昵稱：<input type="text" id="nickname" /><br />
<textarea id="comment"></textarea><br />
<input type="button" value="評論" οnclick="addComment()"/>
</body>
</html>
方法二：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>演示文檔</title>
<script type="text/javascript" language=javascript>
?? ? ? ?function addcomment(){
?? ? ? ? ? ?var nickname=document.getElementById("nickname").value;
?? ? ? ? ? ?var comment=document.getElementById("comment").value;
?? ? ? ? ? ?
?? ? ? ? ? ?var tablecomment=document.getElementById("tablecomment");
?? ? ? ? ? ?var tr=tablecomment.insertRow(-1);
?? ? ? ? ? ?var td1=tr.insertCell(-1);
?? ? ? ? ? ?td1.innerText=nickname;
?? ? ? ? ? ?var td2=tr.insertCell(-1);
?? ? ? ? ? ?td2.innerText=comment;
?? ? ? ?}
?? ?</script>
</head>
<body>
<p>評論區：</p>
<table id="tablecomment" border=5>
?? ?<tbody>
?? ? ? ?<tr><td >喵喵：</td><td >shafa!</td></tr>
?? ?</tbody>
</table>
呢稱：<input id="nickname" type=text ?maxlength=10/><br />
評論：<textarea id="comment"></textarea><br />
<input type=button value="提交" οnclick="addcomment()" />
</body>
</html>
總結
- 上一篇： DOM的appendchild在IE6、
- 下一篇： 点击按钮改变div的颜色