<!DOCTYPE?HTML>
<html>
<head>
<meta?http-equiv="Content-Type"?content="text/html;?charset=utf-8">
<title>無(wú)標(biāo)題文檔</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()">清除節(jié)點(diǎn)內(nèi)容</button>
</body>
</html>
2016-03-26
function clearText() {
var content=document.getElementById("content");
for(i=0;i<content.childNodes.length;i++)
{
var x=content.removeChild(content.childNodes[i]);
}
}
我使用的瀏覽器會(huì)把空白字符算作子節(jié)點(diǎn)，用1-6來(lái)表示，
<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>
因此第一次點(diǎn)擊按鈕，
刪除第child[0]后，1被刪除
<h1>html</h1>變?yōu)閏hild[0],
2變?yōu)閏hild[1],第二次把child[1]刪除，也就是2
for循環(huán)以此類推，會(huì)先把1-6空白字符刪除，之后便停止，因?yàn)閏hild.length會(huì)隨著刪除動(dòng)態(tài)改變，以至于不能一次刪除
同理，第二次點(diǎn)擊按鈕會(huì)把html、javascript、java三個(gè)先刪除，最后點(diǎn)擊一次刪除一個(gè)。
解決方法：把child.length賦值給l,l并不會(huì)動(dòng)態(tài)改變，并總是刪除第一個(gè)child[0]或最后一個(gè)child[child.length-1],一次性把全部子節(jié)點(diǎn)刪除
2016-03-23
循環(huán)刪除的時(shí)候? content.childNodes.length 在一直減小，i 在一直++ 。所以當(dāng)i=3的時(shí)候，content.childNodes.length=2，導(dǎo)致循環(huán)條件不成立