DOM 추가하기

Feb 21, 2024

append / prepend 링크

바닐라 ★append 많이 쓰인다★


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

<head>
    <meta charset="UTF-8">
    <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");
            //id, innerBox1 속성을 줬으니, 애는 이제 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>

//id 하나 추가 된 모습! id를 동적으로 만들어냄

setAttribute를 사용해 자바 스크립트로 동적으로 만들어내기


이 2개의 코드는 다르다. console 확인 ㄱㄱ


1. 자바 스크립트가 인식하는 DOM 객체
2. 그냥 문자열


setAttribute("class", "box");
이렇게 코드를 작성하면, 아까 봤던 '순수한 div'에 클래스가 붙을 것이다.
(콘솔창에서 봐야함)


attribute (속성)은 바로 이런 걸 말한다. class, id 이런 것!


이렇게 작성하면 이 코드의 attribute가 2개 추가 될 것이다
-> 이런 것들을 자바 스크립트로 동적으로 만들어낼 수 있구나!

💡

객체의 상태 = 속성 (attribute)

html의 <div> 태그에 어떤 속성들이 있어?


이런 것들을 엘레멘트.클래스 이런 식으로 해서 찾을 수 있겠구나


이런 것들을 물어보면서.... vs 코드에서 공부해보자!

innerHTML / innerText


innerHTML은 HTML 코드 인식 O
innerText는 HTML 코드 인식 X -> 쓸 일 잘 없음

//innerHTML

//innerText → HTML 코드 인식 안 되고 TEXT로 인식 됐다!

val() (input 태그에 사용)


내가 만든 객체를 #outerBox를 찾아서 append 한다

[ 위에서 적은 코드를 한 줄로 표현 가능 ]

💡

백틱( ` )을 사용해서 안에 홀따옴표(’ ‘)를 사용하지 말고 “ “ 로 사용하자!

💡

완성은 했으나… 실행이 이상하게 나온다. → 제이쿼리로 바꾸자!

💡

자바 스크립트로 하면 이런 풀코드가 필요하네… jQuery로 바꿔보자!

jQuery로 변경 하자

[ 추가하기 코드 ]


<script>
function addAppend() {
            // let newEl = document.createElement("div");
            // console.log(newEl);
            // console.log("<div></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">내부박스</div>`;
            $("#outerBox").append(newString);

        }

[ jQuery로 바꿨을 때, 실행 화면 ]

[ 이렇게 사용하면 좋은 점 ]


디자인을 자바 스크립트 function에 넣어놓고 땡겨쓸 수 있음! -> 재사용 가능!

그러나!! id가 중복되는 문제 발생!


그러나!! id가 유일하지 않은 문제가 있다.
id가 유일하지 않으면 삭제하고 싶은 특정한 엘리먼트를 찾을 수가 없어서 삭제를 못함


<script>
        let n = 1;
        function addAppend() {
            let newString = `<div class="box" id="innerBox1${n}">내부박스${n}</div>`;
            n++;
            $("#outerBox").append(newString);

        }

💡

id 값이 다 다르게 나오는 것 확인! → 바꿔보자! → DOM 삭제하기 (전역변수 이용)

💡

id는 유일해야한다!