[js] 6. 추가하기

Sep 05, 2024


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

코드를 보면 버튼들을 만들어놓고 거기에 onclick에 function을 달아놓았다.

그리고 그아래 div로 박스를 만들어놓고 버튼이 눌렸을때 들어갈수있는 곳을 만들어놓았다.

function안에 새로운 element를 만들고 속성을 부여해서 박스에 넣는 방식을 달리하여 넣는다.

차이는 눈으로 보면 바로 안다.


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

이것은 jQuery방식으로 만든거다. 훨씬 간단하다.

setattribute같은 거 필요없이 문자열로 element를 만들어버린다. 여기선 백틱(`)을 사용하면 “’들을 사용했을 때의 문자열 끊김이 없다고 한다.

See more posts

[js] 6. 추가하기

More articles

[따라하기] 3-1. reply 클래스 만들기

[js] 7. 반복문

[js] 5. 나타내기

[js] 4. 숨기기