DOM 실습 : 추가, 삭제하기

Feb 21, 2024

1. DOM 추가하기

댓글은 append로 추가해야 함

ajax는 부분 reloading이 가능함

프로그램 짜기는 좋으나 ajax를 사용하면 효율이 좋아짐

ajax가 복잡해져서 나온게 react


<!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 addAppend() {
            let newEl = document.createElement("div");
            newEl.setAttribute("class", "box");
            newEl.setAttribute("id", "innerBox1");
            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>

2. 추가된 박스에 이름 지정하기


<!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 {
            margin-top: 10px;
            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 addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);
            let newString = `<div class="box" id="innerBox1">내부박스</div>`; // 아이디가 동일하다는 문제점이 생김
            $("#outerBox").append(newString);
        }

        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>

3. 추가된 박스에 숫자 배정하기


<!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 {
            margin-top: 10px;
            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>
        let n = 1;
        function addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);
            let newString = `<div class="box" id="innerBox${n}">내부박스</div>`; // 아이디가 동일하다는 문제점이 생김
            n++;
            $("#outerBox").append(newString);
        }

        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>

4. 클릭해서 aler창 띄우기

아이디를 찾지 못해서 alert창이 안뜸

추가할 때 이벤트가 생성되어야 함


<!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 {
            margin-top: 10px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가, 삭제</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox"></div>
    <script>
        let n = 0;
        function addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);

            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`; // 아이디가 동일하다는 문제점이 생김
            $("#outerBox").append(newString);
            n++;
        }

        $("#innerBox1").click(() => {
            alert("클릭됨");
        });
    </script>
</body>

</html>

이벤트 시점이 달라서 0부터 뜸


<!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 {
            margin-top: 10px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가, 삭제</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox"></div>
    <script>
        let n = 0;
        function addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);

            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`; // 아이디가 동일하다는 문제점이 생김
            $("#outerBox").append(newString);
            n++;
        }

        function del(n) {
            alert(`번호: ${n}`);
        }
    </script>
</body>

</html>

박스 숫자에 맞는 alert창 띄우기


<!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 {
            margin-top: 10px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가, 삭제</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox"></div>
    <script>
        let n = 0;
        function addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);
            n++;
            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`; // 아이디가 동일하다는 문제점이 생김
            $("#outerBox").append(newString);
        }
        function del(n) {
            $(`#innerBox${n}`).remove();
        }
    </script>
</body>

</html>

6. 클릭해서 박스 삭제하기


<!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 {
            margin-top: 10px;
            border: 1px solid black;
            padding: 10px;
        }
    </style>
</head>

<body>
    <h1>추가, 삭제</h1>
    <button onclick="addAppend()">append로 추가하기</button>
    <div class="box" id="outerBox"></div>
    <script>
        let n = 0;
        function addAppend() {
            // let newEl = document.createElement("div");
            // newEl.setAttribute("class", "box");
            // newEl.setAttribute("id", "innerBox1");
            // newEl.innerHTML = "내부박스1";
            // let el = document.querySelector("#outerBox");
            // el.append(newEl);
            n++;
            let newString = `<div onclick="del(${n})" class="box" id="innerBox${n}">내부박스${n}</div>`; // 아이디가 동일하다는 문제점이 생김
            $("#outerBox").append(newString);
        }
        function del(n) {
            $(`#innerBox${n}`).remove();
        }
    </script>
</body>

</html>

See more posts

DOM 실습 : 추가, 삭제하기

1. DOM 추가하기

2. 추가된 박스에 이름 지정하기

3. 추가된 박스에 숫자 배정하기

4. 클릭해서 aler창 띄우기

6. 클릭해서 박스 삭제하기

More articles

AJAX 통신

토글로 좋아요 표시하기

DOM 실습 : 숨기고 나타내기

css() Method