Почему removeChild() мешает мне выполнять appendChild() в функции Javascript?
-
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;
}
}