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

Apr 04, 2025


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가하기</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <button onclick="addPrepend()">prepend로 추가하기</button>
    <button onclick="addBefore()">before로 추가하기</button>
    <button onclick="addAfter()">after로 추가하기</button>
    <div class="box" id="outerBox">

    </div>

    <script>
        // 클릭해서 삭제
        function del(e) {
            console.log(e.target);
            e.target.style.display = "none";
        }

        // 밑으로 쌓임
        function addAppend() {
            let newEl = document.createElement("div");

            newEl.setAttribute("class", "box");
            newEl.setAttribute("onclick", "del(event)");
            newEl.innerHTML = "내부박스1";

            let el = document.querySelector("#outerBox");
            el.append(newEl);
        }

        // 위에서 쌓임
        function addPrepend() {
            let newEl = document.createElement("div");
            newEl.setAttribute("class", "box");
            newEl.setAttribute("id", "innerBox2");
            newEl.innerHTML = "내부박스2";

            let el = document.querySelector("#outerBox");
            el.prepend(newEl);
        }
        function addBefore() {
            let newEl = document.createElement("div");
            newEl.setAttribute("class", "box");
            newEl.setAttribute("id", "innerBox3");
            newEl.innerHTML = "내부박스3";

            let el = document.querySelector("#outerBox");
            el.before(newEl);
        }
        function addAfter() {
            let newEl = document.createElement("div");
            newEl.setAttribute("class", "box");
            newEl.setAttribute("id", "innerBox4");
            newEl.innerHTML = "내부박스4";

            let el = document.querySelector("#outerBox");
            el.after(newEl);
        }
    </script>
</body>

</html>

See more posts

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

More articles

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

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

[자바 스크립트] 14. 나타내기

[자바 스크립트] 13. 숨기기