<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
</head>
<body>
<div id="content">
<h1>html</h1>
<h1>php</h1>
<h1>javascript</h1>
<h1>jquery</h1>
<h1>java</h1>
</div>
<script type="text/javascript">
function clearText() {
var content=document.getElementById("content");
for(var i=0;i<content.childNodes.length;i++){
content.removeChild(content.childNodes[0]);
}
}
</script>
<button onclick="clearText()">清除节点内容</button>
</body>
</html>function clearText() {
var content=document.getElementById("content");
for(i=0;i<content.childNodes.length;i++)
{
var x=content.removeChild(content.childNodes[i]);
}
}
我使用的浏览器会把空白字符算作子节点，用1-6来表示，
<div id="content">1
<h1>html</h1>2
<h1>php</h1>3
<h1>javascript</h1>4
<h1>jquery</h1>5
<h1>java</h1>6
</div>
因此第一次点击按钮，
删除第child[0]后，1被删除
<h1>html</h1>变为child[0],
2变为child[1],第二次把child[1]删除，也就是2
for循环以此类推，会先把1-6空白字符删除，之后便停止，因为child.length会随着删除动态改变，以至于不能一次删除
同理，第二次点击按钮会把html、javascript、java三个先删除，最后点击一次删除一个。
解决方法：把child.length赋值给l,l并不会动态改变，并总是删除第一个child[0]或最后一个child[child.length-1],一次性把全部子节点删除
循环删除的时候 content.childNodes.length 在一直减小，i 在一直++ 。所以当i=3的时候，content.childNodes.length=2，导致循环条件不成立