순수 자바스크립트 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 트리의 임의의 위치에 다시 부착할수 있다.
'Javascript' 카테고리의 다른 글
[공유] 게시판 댓글 테스트 (0) | 2020.02.18 |
---|---|
XML DOM 의 Node Values 변경 (0) | 2020.02.17 |
hierarchyrequesterror 계층 구조 요청 오류 (0) | 2020.02.11 |
[공유] 자바스크립트 array 메소드 총정리 (0) | 2020.02.10 |
[JS] this 고정 그리고 유사배열 활용 bind,call,apply (0) | 2020.02.10 |