1. 추가 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>
백틱(` `) 을 사용하면 문자열에 변수를 포함시킬 수 있다. ${} 을 사용해 변수를 포함시킨다.
append 를 하면 아우터박스에 새로운 내부박스가 번호 순서대로 만들어진다.
2. 제거 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>
삭제를 위해 del 함수를 추가한다. del 함수는 remove() 메서드를 가지고 있다
내부박스를 누르면 박스가 삭제된다.
삭제는 <div id=””> 를 사용하는 것보다 <div onclick=””> 를 사용하는 것이 좋다.
onclick을 사용하면 <div onclick="del(${n})”> 처럼 div 내에서 삭제 메서드를 호출할 수 있지만, <div id=””> 를 사용하면 del 메서드를 별도로 호출해야 하기 때문에 불편함이 있다.
Share article