<!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>
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]);
}
}
我使用的瀏覽器會把空白字符算作子節點，用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],一次性把全部子節點刪除
2016-03-23
循環刪除的時候? content.childNodes.length 在一直減小，i 在一直++ 。所以當i=3的時候，content.childNodes.length=2，導致循環條件不成立