removeChild ()가 왜 JavaScript 함수 내에서 AppendChild ()를하지 못하게합니까?

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

  •  16-09-2019
  •  | 
  •  

문제

이 코드에서 cleangrid () 함수를 호출 할 때 내 목표는 클래스 '서클'인 div를 제거하고 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>
도움이 되었습니까?

해결책

나는 당신을 생각하지 않습니다 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, 표준은 아니지만 모든 주요 브라우저와 대부분의 작은 브라우저에서 지원됩니다.

다른 팁

tj crowder는 행동 뒤에있는 논리로 그것을 못 박았습니다.

그러나 이것은 효과가 있습니다.

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