[자바스크립트] 15. 이벤트 종류 (동적으로 추가하기)

Apr 02, 2025


<!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 del(e) {
        console.log(e.target);
        e.target.style.display = "none";
      }

      function addAppend() {
        let newEl = document.createElement("div");
        newEl.setAttribute("class", "box");
        newEl.setAttribute("onclick", "del(event)");
        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>

1. addAppend() 함수


function addAppend() {
  let newEl = document.createElement("div");
  newEl.setAttribute("class", "box");
  newEl.setAttribute("onclick", "del(event)");
  newEl.innerHTML = "내부박스1";

  let el = document.querySelector("#outerBox");
  el.append(newEl);
}

새로운 <div> 요소를 생성하고 클래스와 클릭 이벤트를 설정.

innerHTML로 내용을 추가한 후, outerBox의 마지막 자식으로 추가함.

append()는 가장 마지막에 추가됨.

2. addPrepend() 함수


function addPrepend() {
  let newEl = document.createElement("div");
  newEl.setAttribute("class", "box");
  newEl.innerHTML = "내부박스2";

  let el = document.querySelector("#outerBox");
  el.prepend(newEl);
}

새로운 <div> 요소를 outerBox의 가장 첫 번째 자식으로 추가함.

prepend()는 가장 위쪽에 추가됨.

3.addBefore() 함수


function addBefore() {
  let newEl = document.createElement("div");
  newEl.setAttribute("class", "box");
  newEl.innerHTML = "내부박스3";

  let el = document.querySelector("#outerBox");
  el.before(newEl);
}

새로운 <div> 요소를 outerBox 바로 이전 위치에 추가함.

📌 before()는 선택 요소의 바로 앞에 추가됨.

4. addAfter() 함수


function addAfter() {
  let newEl = document.createElement("div");
  newEl.setAttribute("class", "box");
  newEl.innerHTML = "내부박스4";

  let el = document.querySelector("#outerBox");
  el.after(newEl);
}

새로운 <div> 요소를 outerBox 바로 다음 위치에 추가함.

after()는 선택 요소의 바로 뒤에 추가됨.