예제 8-10. HTML 태그의 동적 추가 및 삭제

WEB/JAVASCRIPT-CONCEPT 2017. 10. 31. 12:18 |

4. HTML 문서의 동적 구성

HTML 문서의 로드가 완료된 document에 새로운 HTML 태그를 추가할 수 있는가? 당연히 삽입 할 수 있다.

자바스크립트 코드를 이용하여 추가하고 싶은 HTML 태그를 나타내는 DOM 객체를 생성하여 DOM 트리에 직접 삽입하면 된다.


* DOM 객체 동적 생성


document.createElement("태그이름");를 호출하면 HTML 태그의 DOM 객체를 생성할 수 있다.

다음은 <div> 태그의 DOM 객체를 생성하는 코드이다.

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


이제 newDIV 객체의 프로퍼티를 이용하여 <div> 태그를 완성할수 있다

다음은 innerHTML 프로퍼티를 이용하여 <div> 태그에 HTML 텍스트를 삽입하는 코드이다.

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


다음 자바스크립트 코드를 이용하여 <div> 태그에 속성을 추가하거나 CSS3 스타일 시트도 달 수 있다.

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

newDIV.style.backgroundColor="yellow";



1
2
3
4
var newDIV = document.createElement("div");
newDIV.innerHTML = "새로 생성된 DIV입니다.";
newDIV.setAttribute("id","myDiv");
newDIV.style.backgroundColor="yellow";
cs

* 위의 자바스크립트 코드는 사실상 밑의 <div> 태그 정보를 가진 DOM 객체 생성


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

* DOM 트리에 삽입
이제 이 newDIV 객체를 DOM 트리에 삽입해보자. DOM 객체를 DOM 트리에 삽입하는 여러 가지 방법이있지만 대표적으로 다음 2가지 방법을 활용한다.

부모.appendChild(DOM객체); // DOM 객체를 부모의 마지막 자식으로 삽입
부모.insertBefore(DOM객체,기준자식); // DOM 객체를 부모의 자식 객체 중 기준자식 앞에 삽입

다음은 앞에서 만든 newDiv 객체를 <p "id=p"> 태그의 마지막 자식으로 추가하는 자바스크립트 코드이다.
var p = document.getElementById("p"); // <p "id=p"> 태그의 DOM 객체 찾기
p.appendChild(newDiv);

이코드에 의해 newDIV가 삽입되면 DOM 트리가 바뀌고 브라우저 화면이 바로 갱신된다.

* 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 트리의 임의의 위치에 다시 부착할수 있다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>문서의 동적 구성</title>
<script>
function createDIV() {
    var obj = document.getElementById("parent");
    var newDIV = document.createElement("div");
    newDIV.innerHTML = "새로 생성된 DIV입니다.";
    newDIV.setAttribute("id", "myDiv");
    newDIV.style.backgroundColor = "yellow";
    newDIV.onclick = function() {
        var p = this.parentElement; // 부모 HTML 태그 요소
        p.removeChild(this); // 자신을 부모로부터 제거
    };
    obj.appendChild(newDIV);
}
</script>
</head>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3>
<hr>
<p>DOM 트리에 동적으로 객체를 삽입할 수 있습니다.
createElement(), appendChild(),
removeChild() 메소드를 이용하여 새로운 객체를 생성,
삽입, 삭제하는 예제입니다.</p>
<a href="javascript:createDIV()">DIV 생성</a><p>
<p>
</body>
</html>
 
cs





저작자표시 비영리 동일조건

'WEB > JAVASCRIPT-CONCEPT' 카테고리의 다른 글

예제 9-5. 이벤트 리스너에서 이벤트 객체 전달 받기  (0) 2017.10.31
예제 9-1. HTML 태그 내에 이벤트 리스너 작성. 예제 9-2. DOM 객체의 이벤트 리스너 프로퍼티에 리스너 등록. 예제 9-3. addEventListener() 사용. 예제 9-4. 익명 함수로 이벤트 리스너 작성  (0) 2017.10.31
예제 8-9. HTML 문서 작성 연습 페이지 만들기  (0) 2017.10.31
예제 8-8. document가 닫힌 후 document.write()를 잘못 사용하는 예  (0) 2017.10.31
예제 8-7. write()와 writeIn()활용  (0) 2017.10.31
Posted by 너래쟁이
:

티스토리툴바