추가 append( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
margin-bottom: 3px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>추가하기</h1>
<button onclick="addAppend()">append로 추가하기</button>
<div class="box" id="outerBox">
</div>
<script>
let n = 0;
function addAppend() {
n++;
let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`;
$("#outerBox").append(newString);
}
</script>
</body>
</html>백틱을 사용하면 여러 줄에 걸친 문자열을 작성하거나, 문자열 안에 변수를 쉽게 포함할 수 있습니다.
${ }:백틱으로 감싼 문자열 내에서 변수를 포함하거나, 계산을 수행한 결과를 문자열에 삽입할 수 있다.
한번 클릭 했을 때
두번 클릭 했을 때
클릭 할 때 마다 내부 박스가 1개씩 증가 된다.
제거 remove( )
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<style>
.box {
margin-bottom: 3px;
border: 1px solid black;
padding: 10px;
}
</style>
</head>
<body>
<h1>추가하기</h1>
<button onclick="addAppend()">append로 추가하기</button>
<div class="box" id="outerBox">
</div>
<script>
let n = 0;
function addAppend() {
n++;
let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`;
$("#outerBox").append(newString);
}
function del(n) {
$(`#innerBox${n}`).remove();
}
</script>
</body>
</html>초기 화면
삭제 했을 때
박스를 클릭하면 onclick 이벤트가 발생해서 클릭된 박스가 삭제 된다.
Share article
