1. DOM 객체 동적 생성: document.createElement("태그이름")
- 태그이름의 DOM 객체 생성
예)
2. DOM 트리에 삽입
- 부모.appendChild(DOM객체);
- 부모.insertBefore(DOM객체 [, 기준자식]);
예) 생성한 <div> 태그를 <p "id=p"> 태그의 마지막 자식으로 추가
3. DOM 객체의 삭제
- var removedObj = 부모.removeChild(떼어내고자하는자식객체);
예)
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DIV 객체를 동적으로 생성, 삽입, 삭제</title>
<script>
function createDIV(){
obj = document.getElementById("parent");
newDiv = document.createElement("div");
newDiv.innerHTML = "새로 생성된 DIV입니다."
newDiv.setAttribute("id","myDiv");//새롭게 만들어지는 div 태그의 id 값 저장
//익명함수
newDiv.onclick = function (){
p = this.parentElement;//부모 HTML 태그요소
p.removeChild(this);//자신을 부모 태그로부터 제거
};
obj.appendChild(newDiv);//body에 자식 태그로 추가
}
</script>
</head>
<body id="parent">
<h3>DIV 객체를 동적으로 생성, 삽입, 삭제하는 예제</h3><hr>
<a href="javascript:createDIV()">DIV 생성</a><p></p>
</body>
</html>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4ftext-decoration:none">Colored by Color Scripter
|
http://colorscripter.com/info#e" target="_blank" style="text-decoration:none;color:white">cs |
'화면구현' 카테고리의 다른 글
| 마우스 핸들링, oncontextmenu, 이미지 로드, onload, new Image() (0) | 2020.03.12 |
|---|---|
| 이벤트 (0) | 2020.03.12 |
| document의 열기와 닫기, open()과 close() (0) | 2020.03.12 |
| document.write()와 document.writeln() (0) | 2020.03.12 |
| this, document, DOM 객체 찾기 (0) | 2020.03.12 |
rss