[자바 스크립트] 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>

<!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>