brograming
버튼 추가, 제거 (getElementById, appendChild) 본문
|
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
33
34
35
36
37
38
39
40
41
42
43
44
|
<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script>
let cnt = 1;
function add(){
let btn = document.createElement("input");
btn.type = "button"
btn.value ="btn"+cnt;
btn.id = "b"+cnt;
btn.onclick = handler;
let list = document.getElementById("list"); // <div id = "list"></div>
list.appendChild(btn);
cnt++;
}
function del(){
if(cnt < 2){
alert("삭제할 버튼 없음")
return;
}
let num = cnt-1; // 마지막 버튼 번호
let delbtn = document.getElementById("b"+num); //<input type = "button" value = "btn2" id= "b2" onclick = "handler()">
let list = document.getElementById("list");
list.removeChild(delbtn); // delbtn == <input type = "button" value = "btn2" id= "b2" onclick = "handler()">
cnt--;
}
function handler(){
// this : 이벤트 발생한 타겟 객체
alert(this.id + "버튼 눌림")
}
</script>
</head>
<body>
<input type = "button" value = "버튼추가" onclick = "add()">
<input type = "button" value = "버튼삭제" onclick = "del()">
<div id = "list">
</div>
</body>
</html>
|
cs |
▼함수 add()
9~13 줄 : <input type = "button" value = "btn1" id= "b1" onclick = "handler()"> 생성
14 줄 : let list = document.getElementById("list");
15줄 : list.appendChild(btn)
appendChild : 선택한 요소 (list)안에 자식 요소(btn)를 추가
기본적으로 appendChild를 통해 요소를 추가하면 맨 뒤에 추가하게 된다
▼함수 del()
24줄 : 제일 끝에 남아있는 버튼요소를 delbtn에 담음
let delbtn = <input type = "button" value = "btn6" id= "b6" onclick = "handler()">
25 줄 : let list = document.getElementById("list");
26줄 : list.removeChild(delbtn)
▼함수 handler()
'[JAVASCRIPT]' 카테고리의 다른 글
| JSON.parse() (0) | 2023.04.18 |
|---|---|
| event handler (0) | 2023.03.25 |
| alert 알림창(경고창) 띄우기 (0) | 2023.03.22 |
| var, let, const (0) | 2023.03.22 |
'[JAVASCRIPT]' Related Articles
more
