为什么removeChild之（）阻止我的JavaScript函数中做的appendChild（）？

StackOverflow https://stackoverflow.com/questions/1475937

  •  16-09-2019
  •  | 
  •  

题

在此代码时，我调用cleanGrid（）函数，我的目标是摆脱那类“圆圈”，并与一流的“广场”一个div来取代它的div。对于我因为他们是不可替代的项目，使的replaceChild（）是行不通的我真的很使用此代码。如果我注释掉的函数调用cleanGrid（）的代码运行正常和按钮只是增加了一个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>
有帮助吗？

解决方案

我不认为你的cleanGrid功能会工作得你编码的方式。 x.childNodes将继续truthy即使它是空的（空NodeList不falsey）。所以我怀疑它抛出一个异常（在removeChild通话），或者不断地循环，这（两种方式）就是为什么其他代码没有运行。尝试在调试环境中运行它（火狐+ 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，虽然不是标准，被所有的主流浏览器的支持和大多数小，小事化的。

其他提示

T.J。克劳德钉下来与后面的行为

的逻辑

然而，这将工作：

function cleanGrid() {
 var x = document.getElementById("grid");
 var len =x.childNodes.length;
 while(len) {
  x.removeChild(x.lastChild);
 --len;
 }
}
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top