반응형
요소 추가/삭제
1) 요소 생성
document.createElement("태그");
// document.createElement("p");
2) 요소 추가
document.appendChild(요소);
요소 생성/추가
<script>
let cnt = 1;
function add() {
let btn = document.createElement("input");
btn.type = "button";
btn.value = "btn" + cnt;
btn.id = "b" + cnt; //버튼에 cnt를 붙여 아이디 중복되지 않게 할당됨
btn.onclick = handler; //handler 등록
//호출은 바로 실행. 등록 -> 이 클릭이 발생할때마다 호출을 한다.
cnt++;
// <input type = "button" value = "btn1" id = "b1" onclick = "handler">
//위 의 코드가 이 코드가 계속 생성되는 것을 의미.
let list = document.getElementById("list"); //list div 받아오기
list.appendChild(btn); // 요소 생성
}
function handler(){
// this : 이벤트 발생한 타겟 객체
alert(this.id + " 버튼 눌림");
}
</script>
<body>
<input type="button" value="버튼추가" onclick="add()">
<div id="list"></div>
</body>
3) 요소 삭제
document.removeChild(요소);<script>
function del() {
if (cnt < 2) {
alert("삭제할 버튼 없음"); //삭제할 버튼이 없으면 없다고 알림
return;
}
let num = cnt - 1; //마지막 버튼 번호
let delBtn = document.getElementById("b" + num); //마지막 버튼 아이디
let list = document.getElementById("list");
list.removeChild(delBtn);
cnt--;
}
function handler(){
// this : 이벤트 발생한 타겟 객체
alert(this.id + " 버튼 눌림");
}
</script>
<body>
<input type="button" value="버튼삭제" onclick="del()">
<div id="list"></div>
</body>
버튼 추가 삭제
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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; //handler 등록
//호출은 바로 실행. 등록은 이 클릭이 발생할때마다 호출을 알려줌
cnt++;
// <input type = "button" value = "1"> //위 의 코드가 이 코드를 의미.
let list = document.getElementById("list");
list.appendChild(btn);
}
function del() {
if (cnt < 2) {
alert("삭제할 버튼 없음"); //삭제할 버튼이 없으면 없다고 알림
return;
}
let num = cnt - 1; //마지막 버튼 번호
let delBtn = document.getElementById("b" + num); //마지막 버튼 아이디
let list = document.getElementById("list");
list.removeChild(delBtn);
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>
4) 요소에 이벤트 핸들러 추가
요소.onclick = 함수반응형
