[자바 스크립트] 17. 반복문으로 리스트 만들기

Apr 04, 2025


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <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>
        let id = 1;
        function render() {
            let el = document.querySelector("#outerBox");

            el.append(makeCard(id));
            id++;
        }

        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>

See more posts

[자바 스크립트] 17. 반복문으로 리스트 만들기

More articles

[스프링부트] 30. 예외 처리

[자바 스크립트] 18. 쿠키 관리

[자바 스크립트] 16. 삭제하기

[자바 스크립트] 15. 추가하기