Почему removeChild() мешает мне выполнять appendChild() в функции Javascript?

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

  •  16-09-2019
  •  | 
  •  

Вопрос

В этом коде, когда я вызываю функцию cleanGrid(), моей целью было избавиться от div, который был классом 'circle', и заменить его div с классом 'square'.Для чего я действительно использую этот код, они не являются заменяемыми элементами, поэтому replaceChild() не будет работать.Если я закомментирую вызов функции cleanGrid(), код выполняется нормально, и кнопка просто добавляет div с классом 'square' для каждого нажатия.Что я хочу, чтобы на самом деле произошло, так это чтобы cleanGrid() удалила все, что находится в div 'grid', и оставила место для того, что должно быть добавлено после вызова этой функции - но после вызова этой функции ничего нельзя добавить, и я не уверен почему.

<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 будет продолжать быть правдивым, даже если оно пустое (пустой NodeList не является фальшивым).Поэтому я подозреваю, что это создает исключение (на removeChild вызов) или бесконечный цикл, который (в любом случае) является причиной того, что другой код не выполняется.Попробуйте запустить его в среде отладки (Firefox + Firebug, IE + Visual Studio или dev toolkit, что угодно), где вы сможете увидеть, что происходит.

Вот неофициальная переработка cleanGrid:

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

Или, конечно:

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

...с тех пор как innerHTML, хотя и не стандартный, поддерживается всеми основными браузерами и большинством второстепенных.

Другие советы

Ти ДжейКраудер определил это логикой, лежащей в основе такого поведения

Однако это сработает:

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