1.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid black; padding: 10px; } .card { border: 1px solid lightgray; box-shadow: 0 4px 4px 0 grey; padding: 10px; margin: 5px; border-radius: 5px; } </style> </head> <body> <h1>반복문으로 리스트 만들기</h1> <button onclick="render()">render</button> <div class="box" id="outerBox"> </div> <script> function render() { let el = document.querySelector("#outerBox"); for (let i = 1; i < 5; i++) { el.append(makeCard(i)); // 객체가 들어가면서 그림이 그려짐 } } function makeCard(id) { let card = document.createElement("div"); card.setAttribute("class", "card"); card.setAttribute("id", "card-" + id); card.innerHTML = ` // 삭제할때 id가 필요함 <h3>제목${id} 입니다</h3> <p>내용${id} 입니다</p> <button onclick="del(${id})">삭제</button> `; return card; // card : 객체를 리턴 } function del(id) { let el = document.querySelector("#card-" + id); el.remove(); // id를 찾아서 삭제 } </script> </body> </html>
2. 리팩토링하기
- JQuery는 문자열을 반환
- 동적으로 리턴 → 실행시마다 값이 달라짐
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script> <title>Title</title> <style> .box { display: grid; grid-template-columns: 1fr 1fr 1fr; border: 1px solid black; padding: 10px; } .card { border: 1px solid lightgray; box-shadow: 0 4px 4px 0 grey; padding: 10px; margin: 5px; border-radius: 5px; } </style> </head> <body> <h1>반복문으로 리스트 만들기</h1> <button onclick="render()">render</button> <div class="box" id="outerBox"> </div> <script> function render() { for (let i = 1; i < 5; i++) { $("#outerBox").append(makeCard(i)); } } function makeCard(id) { let card = ` <div class="card" id="card-${id}"> <h3>제목${id} 입니다</h3> <p>내용${id} 입니다</p> <button onclick="del(${id})">삭제</button> </div> `; return card; } function del(id) { $(`#card-${id}`).remove(); } </script> </body> </html>
Share article
