通过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来实现删除。
时间： 2024-10-23 00:00:37