반복문 활용해서 카드 리스트 만들기
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>카드리스트 만들어보기</title>
<style>
.box {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
border: 1px solid black;
padding: 10px;
}
.card {
border: 1px solid lightslategray;
box-shadow: 0 4px 4px 0 gray;
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");
// 반복문 통해서 E 요소 생성
for (let i = 0; i < 10; i++) {
el.append(makeCard(i));
}
}
function makeCard(id) {
let card = document.createElement("div");
card.setAttribute("class", "card");
card.setAttribute("id", "card--" + id);
card.innerHTML = `
<h3>제목 ${id} 입니다.</h3>
<p>내용 ${id} 입니다.</p>
<button onclick="del(${id})">삭제</button>
`;
return card;
}
function del(id) {
let el = document.querySelector("#card--" + id);
el.remove();
}
</script>
</body>
</html>
'프로그래밍 > JavaScript' 카테고리의 다른 글
| JavaScript_Promise (0) | 2023.05.13 |
|---|---|
| JavaScript_토글 좋아요 기능 (0) | 2023.05.08 |
| JavaScript_주문 정보와 배송 정보 동일 기능 (0) | 2023.05.08 |
| JavaScript_브라우저 객체 모델 BOM (0) | 2023.05.07 |
| JavaScript_이벤트 등록 처리 (0) | 2023.05.07 |
