[자바스크립트] DOM 추가하기 (5)

기존의 DOM 에 자식 DOM 만들어서 추가하기

mmmmmm02

Aug 31, 2024

Contents

DOM 추가하기

DOM 을 createElement(”div”) 로 만들고, 그것을 추가하는 기능도 알아보자.

전체 코드는 아래에 넣어두었다.

append() / prepend()

prepend() 는 들어가있는 애 앞으로 들어가고,

append() 는 들어가있는 애 뒤로 들어간다.

그렇다면 댓글을 쓰는 경우는? → prepend 를 사용해야 한다. 그렇지 않으면 내 댓글은 심해 깊은 곳, 아주 아래에 가있을 터.

박스 설계를 잘 해야 한다.

아이템 하나하나가 아닌, 부모를 잡아야 한다. (부모인 #outerBox 를 잡아서 넣음)

부모를 잡아서 append 나 prepend 로 처리한다.

댓글을 넣을 때는 append / prepend 로 처리.

let newE1 = document.createElement(”div”); 로 만들어진 DOM 을

console.log(newE1); 로 콘솔에 뜨게 찍어보면, 내가 setAttribute 한대로 DOM 이 생기는 것을 알 수 있다.

before() / after()

before 는 잡은 전체 박스의 위에 올라오고,

after 는 전체 박스의 아래에 올라온다.

1) 바닐라 자바스크립트 코드

아래는 전체 코드(바닐라로 적용)


<!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"); // 빈 dom 생성 
            // console.log(newEl); 객체, dom 이 생기는 것 알 수 있음 
            newEl.setAttribute("class", "box");
            newEl.setAttribute("id", "innerBox1");
            // <div class="box" id="innerBox1">이너자리<div>
            newEl.innerHTML = "내부박스1";
            // <div class="box" id="innerBox1">내부자리1<div>
            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>

F12 에서 박스가 어느 위치에 추가되는 지를 확인 할 수 있다. (id=”outerBox” 가 중심)

2) 제이쿼리 코드

제이쿼리 사용할 때에는 <head>에 라이브러리 넣는 거 잊지말기^^


<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

백틱 ` 을 사용하면 데이터 바인딩이 된다. Enter 로 줄바꿈도 가능하다.


function render(id, text) {
      return `<div class="box" id="${id}">${text}</div>`;
}

아래는 같은 내용을 제이쿼리로 적용한 전체 코드.

제일 큰 부분인 DOM 을 만들어 놓고<div class=”box” id=”outerBox”> ,

render 로 화면에 표시한다.


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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            border: 1px solid black;
            padding: 10px;
        }
    </style>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
</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 render(id, text) {
            return `<div class="box" id="${id}">${text}</div>`;
        }


        function addAppend() {
            let box = render("inner1", "내부박스1");
            $("#outerBox").append(box);
        }
        function addPrepend() {
            let box = render("inner2", "내부박스2");
            $("#outerBox").prepend(box);
        }
        function addBefore() {
            let box = render("outer1", "외부박스1");
            $("#outerBox").before(box);
        }
        function addAfter() {
            let box = render("outer2", "외부박스2");
            $("#outerBox").after(box);
        }
    </script>
</body>

</html>