鼠标点击次数的用法
- n.innerHTML:向n中插入文本内容
- childnodes:找到该元素中所有的子节点
- length : 统计元素中的子节点的个数
- createElement:创建新的节点
- removechild:删除子节点
- appendchild:在节点的末尾插入新的节点
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var times = 0 ;
function mycheck () {
times++; //统计鼠标点击的次数;
var parent = document.getElementById("demo");//找到div区域;
var x = document.createElement("p");//创建新的段落p,并将它取变量值为x
var n = times + 1; //鼠标每点击一次,次数相加;
x.innerHTML = "这是第"+n+"个段落";// 在x中插入文本内容;
parent.appendChild(x);//在div中,最后一个子节点中添加一个新的节点;
}
function youcheck () {
var q = document.getElementById("demo");//找到div区域中的内容并取值为q;
var w = q.childNodes;//找到div区域中所有的子节点;
var e = w.length;//统计子节点的个数;
var t = w[e-1];//表示最后一个子节点,系统默认从0开始,所以最后一个子节点是个数减1;
q.removeChild(t);//删除最后一个子节点
}
</script>
</head>
<body>
<h1>这是一个标题</h1>
<div id="demo">
<p>创建一个新的节点</p>
</div>
<input type="button" name="demo2" id="demo2" value="添加子节点" onclick="mycheck()" />
<input type="button" name="demo3" id="demo3" value="删除子节点" onclick="youcheck()" />
</body>
</html>