[JS] 자바스크립트 HTML 태그 요소 동적 추가 및 삭제

순수 자바스크립트  HTML 태그 요소 동적 추가 및 삭제

자바스크립트 HTML 태그 요소 동적 추가 및 삭제 방법은 DOM 객체를 생성하여 DOM 트리에 동적 생성/삭제하려는 내용을 추가시키면 된다.

 

1 DOM 객체 생성

document.createElement("태그이름"); 를 호출하면 HTML 태그의 DOM 객체를 생성할 수 있다.  
이제 newDIV 객체의 프로퍼티를 이용하여 <div> 태그를 완성할수 있다

 

 var newDIV = document.createElement("div");​

 

 

 

2 innerHTML 프로퍼티를 이용

innerHTML 프로퍼티를 이용하여  <div> 태그에 HTML 텍스트를 삽입

 

newDIV.innerHTML = "새로 생성된 DIV입니다.";

 

<div> 태그에 속성을 추가하거나 CSS스타일 시트도 달 수 있다.

newDIV.setAttribute("id","myDiv");

newDIV.style.backgroundColor="yellow";

 

중간과정확인 : DOM 객체 확인

<div id="myDiv"
    style="background-color:yellow">
    새로 생성된 DIV입니다.
</div>

 

 

 

3 DOM 트리에 삽입

이제 이 newDIV 객체를 DOM 트리에 삽입해보자.
DOM 객체를 DOM 트리에 삽입할 때 대표적으로 다음 2가지 방법을 활용한다.

 

부모.appendChild(DOM객체); // DOM 객체를 부모의 마지막 자식으로 삽입

부모.insertBefore(DOM객체,기준자식); // DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입

 

다음은 앞에서 만든 newDiv 객체를 <p "id=p"> 태그의 마지막 자식으로 추가하는 자바스크립트 코드이다.
코드에 의해 newDIV가 삽입되면 DOM 트리가 바뀌고 브라우저 화면이 바로 갱신된다.

 

var p = document.getElementById("p"); // <p "id=p"> 태그의 DOM 객체 찾기
p.appendChild(newDiv);

 

 

 

4 DOM 객체의 삭제

 

removeChild() 메소드를 이용하면 부모에게서 자식 객체를 떼어낼 수 있다.

 

var removedObj = 부모.removeChild(떼어내고자하는자식객체);

 

"id=myDiv"인 DOM 객체를 DOM 트리에서 떼어내고자 하면 다음과 같이 한다

 

var myDiv = document.getElementById("myDiv");
var parent = myDiv.parentElement; // 부모 객체 알아내기
parent.removeChild(myDiv); // 부모로부터 myDiv 객체 떼어내기

 

DOM 객체가 DOM 트리에서 제거되면 브라우저 화면이 즞각 갱신되어 DOM 객체에 의해 출력된 HTML 콘텐츠가 사라진다. 떼어낸 myDiv 객체는 DOM 트리의 임의의 위치에 다시 부착할수 있다.