为什么removeChild（）阻止我在Javascript函数中执行appendChild（）？_Javascript_Dom_Appendchild

为什么removeChild（）阻止我在Javascript函数中执行appendChild（）？

javascript dom

为什么removeChild（）阻止我在Javascript函数中执行appendChild（）？,javascript,dom,appendchild,Javascript,Dom,Appendchild,在这段代码中，当我调用cleanGrid（）函数时，我的目标是去掉类为“circle”的div，并用类为“square”的div替换它。对于我真正使用的代码，它们不是可重放的项，因此replaceChild（）将不起作用。如果我注释掉对cleanGrid（）的函数调用，代码运行良好，按钮只为每次单击添加一个类为“square”的div。我想让cleanGrid（）删除'grid'div中的任何内容，并为调用此函数后应该添加的内容留出空间——但调用此函数后不能添加任何内容，我不确定为什么 <

在这段代码中，当我调用cleanGrid（）函数时，我的目标是去掉类为“circle”的div，并用类为“square”的div替换它。对于我真正使用的代码，它们不是可重放的项，因此replaceChild（）将不起作用。如果我注释掉对cleanGrid（）的函数调用，代码运行良好，按钮只为每次单击添加一个类为“square”的div。我想让cleanGrid（）删除'grid'div中的任何内容，并为调用此函数后应该添加的内容留出空间——但调用此函数后不能添加任何内容，我不确定为什么

<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>


你好
加一个正方形
var g={}；
g、 myGrid=document.getElementById（“网格”）；
函数addSquare（）{
//调用cleanGrid（）会给我带来问题。
//我想先把所有东西都擦干净，然后添加“square”类的div。
//但它只是清除“grid”div，不允许添加任何内容。
cleanGrid（）；//为什么不呢？
var newSquare=document.createElement（“div”）；
newSquare.className=“square”；
newSquare.innerHTML=“square”；
g、 myGrid.appendChild（新闻广场）；
}
函数cleanGrid（）{
var x=document.getElementById（“网格”）；
while（x.childNodes）{
var o=x.lastChild；
x、 去核细胞（o）；
}
}

我认为您的

cleanGrid

功能不会像您编写的那样工作

x.childNodes

即使是空的，也将继续是真实的（空的

NodeList

不是假的）。因此我怀疑它抛出了一个异常（在

removeChild

调用上）或无休止的循环，这就是为什么其他代码没有运行的原因。试着在调试环境（Firefox+Firebug、IE+VisualStudio或dev toolkit等）中运行它，在那里您可以看到发生了什么

下面是对清洁网格的即兴返工：

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

或者，当然：

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

…因为

innerHTML

，虽然不是标准的，但所有主要浏览器和大多数次要浏览器都支持它。

T.J.Crowder用行为背后的逻辑将其固定下来

但是，这将起作用：

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