Pourquoi removeChild() m'empêche de faire appendChild() dans une fonction Javascript?

Dans ce code, lorsque j'appelle la fonction cleanGrid(), mon but était de me débarrasser de la div qui était la classe 'circle' et de la remplacer par une div avec la classe 'square'. Pour ce que j'utilise vraiment ce code car ils ne sont pas remplaçables, replaceChild() ne fonctionnerait pas. Si je commente l'appel de fonction à cleanGrid() le code fonctionne bien et le bouton ajoute juste un div avec la classe «carré» pour chaque clic. Ce que je veux réellement arriver est que cleanGrid() supprime tout ce qui est dans la div 'grid' et laisse de la place pour ce qui devrait être ajouté après que cette fonction soit appelée - mais rien ne peut être ajouté après que cette fonction est appelée et je suis pas certain de pourquoi.Pourquoi removeChild() m'empêche de faire appendChild() dans une fonction Javascript?

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

Source

2009-09-25 peter

Je ne pense pas que votre fonction cleanGrid fonctionnera tout à fait la façon dont vous avez ce avons écrit. x.childNodes continuera à être vrai, même si elle est vide (vide NodeList n'est pas falsey). Donc, je suspecte qu'il lance une exception (sur l'appel removeChild) ou boucle sans fin, qui (de toute façon) est la raison pour laquelle l'autre code ne fonctionne pas. Essayez de l'exécuter dans un environnement de débogage (Firefox + Firebug, IE + Visual Studio ou la boîte à outils dev, peu importe) où vous pouvez voir ce qui se passe.

Voici un remaniement hors impromptues de cleanGrid:

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

Ou, bien sûr:

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

... depuis innerHTML, mais pas standard, est pris en charge par tous les principaux navigateurs et la plupart des mineurs.

Source

2009-09-25 07:55:10

T.J. Crowder clouée vers le bas avec la logique derrière le comportement

Cependant, cela fonctionnera:

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

Source

2009-09-25 07:58:52

Pourquoi removeChild() m'empêche de faire appendChild() dans une fonction Javascript?

Répondre

Questions connexes