0

在这段代码中，当我调用 cleanGrid() 函数时，我的目标是摆脱“circle”类的 div，并将其替换为“square”类的 div。对于我真正使用此代码的原因，它们不是可替换的项目，因此 replaceChild() 不起作用。如果我注释掉对 cleanGrid() 的函数调用，则代码运行良好，并且该按钮只会为每次单击添加一个带有“square”类的 div。我想要实际发生的是 cleanGrid() 删除“网格”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>
4

2 回答 2

2

我认为您的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-25T07:55:10.877 回答
0

TJ Crowder 用行为背后的逻辑将其确定下来

但是，这将起作用：

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
于 2009-09-25T07:58:52.727 回答