javascript 필드 동적 생성/제거 (innerHTML, appendChild)

자바스크립트에서 동적으로 필드를 생성하기 위해 innerHTML을 사용해 div 필드를 붙여넣어 보았다.

var newDivHtml = “<div id=’aaa’></div>”;

document.body.innerHTML = document.body.innerHTML + “” + newDivHtml;

그러나 이 경우, 화면에는 표시가 되지만(동적 생성은 되지만), 동적 삭제가 불가능하다.

다시 document.body.innerHTML 를 출력해보면 문자열 상에서 id가 aaa인 div를 찾을 수 없기 때문이다.

구글링 해본 결과, innerHTML로 추가한 결과 문자열을 얻으려면 document.documentElement.innerHTML 을 사용하면 된다고 했지만, 테스트 결과 찾을 수 없었다.

결국 유효한 코드는 다음과 같다.

———- <javascript div 동적 생성> ———-

var newDivHtml = “<span>추가할 내용</span>”;

var div = parent.document.createElement(“div”);
div.id = “aaa”;
div.innerHTML = newDivHtml;

// body에 심기

parent.document.getElementsByTagName(“body”)[0].appendChild(div);

// 특정 필드에 심기

// parent.document.getElementById(“targetDiv”).appendChild(div);

—————————————-

———- <javascript div 동적 제거> ———-

function remove(id) {
var elem = document.getElementById(id);
return elem.parentNode.removeChild(elem);
}

remove(“aaa”);

—————————————-

이러한 innerHTML 을 사용할 때 문제가 하나 있었는데, 바로 for 문 또는 while 문 안에서 사용하는 경우였다.

for문 안에서 innerHTML 이나 appendChild 를 사용하면

중간 과정이 html 상에 그려지지 않는 문제가 있었다.

루프를 한 번 돌때마다 alert을 띄우면 중간 과정이 그려졌는데 그러자면 innerHTML을 사용하는 의미가 없어진다.

구글링을 해보았지만 외국 코더 분들도 딱히 답이 없어보였다.

그 중에 제일 나은 답안이 for문 혹은 while 문을 setInterval 로 바꾸는 방안이었다.

예를 들어 while 문이 아래와 같이 있다면

————— <AS-IS> —————

var i = 초기값;

while(조건) {

// 내용…

}

// 루프 빠져나와서 수행할 내용

—————————————-

————— <TO-BE> —————

var i = 초기값;

var loop = window.setInterval(function(){

if (!(조건)) {

window.clearInterval(loop);

// 루프 빠져나와서 수행할 내용

}

// 내용…

}, 100);

—————————————-