想依次輸出被刪除內容，結果是undefined，錯在哪？
<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++){
? ? ? var x=content.removeChild(content.childNodes[i]);
? ? ? document.write("被移除的內容是："+x.innerHTML+"<br>");? ? ? //這一句的問題在哪里？？？？
? }
}
</script>
運行結果：
被移除的內容是：undefined
被移除的內容是：undefined
被移除的內容是：undefined
被移除的內容是：undefined
被移除的內容是：undefined
被移除的內容是：undefined
2019-01-03
for(var i=0;i<content.childNodes.length;i++) 你應該從后面的元素的刪除起, 而不是 前面.?
2018-10-14
我也被這個難到了
2018-09-17
自答。
因為在Chrome，Firefox等瀏覽器看來，HTML代碼寫在一行和分多行是有區別的，上述HTML部分實際上存在空節點，如圖片：
空節點是不具有innerHTML屬性，其次在循環的同時，數組的長度在改變，這就難以得到正確結果。
正確做法之一是，將非空節點存在新數組中，然后處理新數組元素：
<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"); var?childArr?=?content.childNodes; //篩選出元素節點(新數組里不再有空節點) var?eleNodeArr?=?new?Array(); for(var?i=0;i<childArr.length;i++){ ????if(childArr[i].nodeType==1){ ????????var?x?=?eleNodeArr.push(childArr[i]);//將元素節點存入新數組 ????} } //???依次刪除元素節點 ????for?(var?i=0;eleNodeArr.length;?i++)?{ ????????????var?y?=?content.removeChild(eleNodeArr[i]); ????????????document.write("被刪除的內容為："+y.innerHTML+"<br>");//注意，這里不能用eleNodeArr[i]代替y ????????} ??} ??</script> ??<button?onclick="clearText()">清除節點內容</button>