爲什麼removeChild（）阻止我在Javascript函數中執行appendChild（）？

在這段代碼中，當我調用cleanGrid（）函數時，我的目標是擺脫類「circle」的div，並用類「square」替換爲div。對於我真的使用這段代碼來說他們不是可替換的項目，所以replaceChild（）將不起作用。如果我將cleanGrid（）的函數調用註釋掉，代碼運行良好，並且按鈕只是爲每次單擊添加一個帶有「square」類的div。我想要實際發生的是爲了cleanGrid（）去除'grid'div中的任何內容，並且在調用此函數之後爲應該添加的任何內容留出空間 - 但是在調用此函數之後不會添加任何東西，並且我不知道爲什麼。爲什麼removeChild（）阻止我在Javascript函數中執行appendChild（）？

<body> 
<div id="grid"><div class="circle">hello</div></div> 
<button onclick="addSquare()">add a Square</button> 

<script language="JavaScript"> 
var g = {}; 
g.myGrid = document.getElementById("grid"); 

function addSquare() { 

// Calling cleanGrid() is giving me problems. 
// I want to wipe everything clean first and then add the divs of the 'square' class. 
// But instead it just clears the 'grid' div and doesn't allow anything to be added. 
cleanGrid(); // WHY NOT? 

var newSquare = document.createElement("div"); 
newSquare.className = "square"; 
newSquare.innerHTML = "square"; 
g.myGrid.appendChild(newSquare); 
} 

function cleanGrid() { 
var x = document.getElementById("grid"); 
while(x.childNodes) { 
    var o = x.lastChild; 
    x.removeChild(o); 
} 
} 
</script> 

</body>

來源

2009-09-25 peter

我不認爲你的cleanGrid函數將以你編碼它的方式工作。 x.childNodes即使是空的也將繼續存在（一個空的NodeList不是虛假的）。所以我懷疑它拋出一個異常（在removeChild調用）或無休止地循環，這（無論哪種方式）是爲什麼其他代碼不運行。嘗試在調試環境（Firefox + Firebug，IE + Visual Studio或開發工具包，無論什麼）中運行它，在這裏您可以看到發生了什麼。

這裏是cleanGrid一個現成的，袖口改造：

function cleanGrid() { 
    var x = document.getElementById("grid"); 
    while (x.lastChild) { 
    x.removeChild(x.lastChild); 
    } 
}

或者，當然了：

function cleanGrid() { 
    document.getElementById("grid").innerHTML = ""; 
}

...因爲innerHTML，雖然不是標準，被所有的支持主要瀏覽器和大多數次要瀏覽器。

來源

2009-09-25 07:55:10

T.J.克羅德釘下來與行爲背後

但是邏輯，這將工作：

function cleanGrid() { 
var x = document.getElementById("grid"); 
var len =x.childNodes.length; 
while(len) { 
    x.removeChild(x.lastChild); 
--len; 
} 
}

來源

2009-09-25 07:58:52

爲什麼removeChild（）阻止我在Javascript函數中執行appendChild（）？

回答

相關問題