JQuery

DOM 실습 : 추가, 삭제하기

Feb 21, 2024
DOM 실습 : 추가, 삭제하기

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>
notion image
notion image
 

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>
notion image
notion image
 
 

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>
notion image
notion image
 

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>
notion image
notion image
  • 박스 숫자에 맞는 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>
notion image
notion image
 

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>
notion image
notion image
 
Share article

More articles

See more posts

AJAX 통신

February 21, 2024
AJAX 통신

토글로 좋아요 표시하기

February 21, 2024
토글로 좋아요 표시하기

DOM 실습 : 숨기고 나타내기

February 21, 2024
DOM 실습 : 숨기고 나타내기

css() Method

February 20, 2024
css() Method

vosw1

RSS·Powered by Inblog