通過js的HTML DOM來實現對html文檔的操作。
使用方法：Node.appendChild();
Node.insertBefore();
Node.removeChild();
<script type="text/javascript">
var count=0;
window.onload = function(){
var Msg = document.getElementById("msg");
var Btn = document.getElementById("btn");
var Msg_c = document.getElementById("msg_c");
var Ul = document.createElement("ul"); //定義一個有序的列表
Msg_c.appendChild(Ul); //向Msg_c中添加UL節點
Btn.onclick = function(){ /* 點擊留言以后，在Msg_c中添加列表，在列表中添加內容
在每一條留言后面添加一個<span>標簽 使用此標簽的onclick屬性
*/
var MsgValue = Msg.value;
var Li = document.createElement("li");
Li.innerHTML = MsgValue + " <span>刪除</span>";
var arrayLi = Ul.getElementsByTagName("li") //判斷是否是第一個留言
if(arrayLi.length>0){
Ul.insertBefore(Li,arrayLi[0]);
count++;
}else{
Ul.appendChild(Li);
count++;
}
Msg.value='';
var Span = document.getElementsByTagName("span");
for(var i=0; i<Span.length; i++){
Span[i].onclick = function(){
Ul.removeChild(this.parentNode);
count--;
}
}
}
}
function totalMessage(){ //統計留言的數量
alert("一共有"+count+"條留言");
}
</script>
<body>
<h1>簡易留言板</h1>
<input id="msg" type="text" size="40" value=""> <input id="btn" type="button" value="留言">
<div id="msg_c"></div>
<input type="button" value="統計" onclick="totalMessage()"/>
</body>
ps.主要利用<span>標簽的onclick來實現刪除。