inblog logo
|
DailyCoding
    Java Script

    13. DOM에 내용 그리기 (DOM Manipulation)

    박은서's avatar
    박은서
    Jan 14, 2026
    13. DOM에 내용 그리기 (DOM Manipulation)
    Contents
    1. DOM Manipulation(조작)1️⃣ DOM Manipulation 이란?2️⃣ DOM Manipulation으로 할 수 있는 일2. 실습0️⃣ 실습 예제1️⃣ value 사용하기2️⃣ textContent3️⃣ createElement, append, prepend4️⃣ before, after5️⃣ setAttribute6️⃣ 전체 코드

    1. DOM Manipulation(조작)

    1️⃣ DOM Manipulation 이란?

    DOM(Document Object Model)은 브라우저가 HTML을 객체 구조로 표현한 것
    ➡️ DOM Manipulation은 JavaScript로 그 DOM을 읽고, 만들고, 수정하고, 삭제하고, 스타일을 바꾸는 모든 작업을 말함

    2️⃣ DOM Manipulation으로 할 수 있는 일

    1) 요소 선택 (Select)

    document.querySelector(".box");
document.getElementById("title");

    2) 요소 내용 읽기/변경

    el.textContent ="바뀐 텍스트";
el.innerHTML ="<strong>굵게!</strong>";

    3) 속성 변경

    el.setAttribute("src","img.jpg");
el.id ="newId";
el.classList.add("active");

    4) 스타일 변경

    el.style.color ="red";
el.style.backgroundColor ="yellow";

    5) 요소 생성 & 추가

    const div =document.createElement("div");
div.textContent ="새 요소";
document.body.append(div);       // append, prepend, before, after

    6) 요소 삭제

    el.remove();      // 요소 제거

    7) 이벤트 연결

    button.addEventListener("click",() => {
	console.log("클릭됨!");
});

    2. 실습

    0️⃣ 실습 예제

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2. DOM에 내용 그리기</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .section {
        margin: 30px 0;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 5px;
      }
      input,
      textarea {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        box-sizing: border-box;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #2196f3;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #0b7dda;
      }
      #display {
        padding: 15px;
        margin: 10px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        min-height: 50px;
      }
      .new-element {
        padding: 10px;
        margin: 5px 0;
        background: #4caf50;
        color: white;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>2. DOM에 내용 그리기 (DOM Manipulation)</h1>

    <div class="section">
      <h2>value 사용 (Form 요소)</h2>
      <input type="text" id="myInput" placeholder="입력하세요" />
      <button onclick="setValue()">value로 값 설정</button>
      <button onclick="getValue()">value 값 가져오기</button>
      <p id="inputResult"></p>
    </div>

    <div class="section">
      <h2>textContent</h2>
      <button onclick="setTextContent()">textContent 사용</button>
      <div id="textDisplay" class="display"></div>
    </div>

    <div class="section">
      <h2>createElement, append, prepend</h2>
      <button onclick="createAndAppend()">append로 추가</button>
      <button onclick="createAndPrepend()">prepend로 추가</button>
      <button onclick="clearElements()">초기화</button>
      <div id="elementContainer" class="display"></div>
    </div>

    <div class="section">
      <h2>before, after</h2>
      <div
        id="target"
        style="
          padding: 15px;
          background: #ff9800;
          color: white;
          border-radius: 5px;
        "
      >
        타겟 요소
      </div>
      <button onclick="addBefore()">before로 앞에 추가</button>
      <button onclick="addAfter()">after로 뒤에 추가</button>
      <button onclick="resetBeforeAfter()">초기화</button>
    </div>

    <div class="section">
      <h2>setAttribute</h2>
      <img
        id="myImage"
        src=""
        alt="이미지"
        style="
          width: 200px;
          height: 150px;
          background: #ddd;
          border-radius: 5px;
        "
      />
      <br /><button onclick="setImageAttr()">setAttribute로 이미지 설정</button>
    </div>

    <script>
      // value 사용
      function setValue() {}

      function getValue() {}

      // textContent
      function setTextContent() {}

      // createElement, append, prepend
      function createAndAppend() {}

      function createAndPrepend() {}

      function clearElements() {}

      // before, after
      function addBefore() {}

      function addAfter() {}

      function resetBeforeAfter() {}

      // setAttribute
      function setImageAttr() {}
    </script>
  </body>
</html>

    1️⃣ value 사용하기

        <script>
      // value 사용
      function setValue() {
        let dom = document.querySelector("#myInput");
        dom.value = "hello";
      }

      function getValue() {
        let dom = document.querySelector("#myInput");
        let text = dom.value;
        alert(text);
      }
    </script>
    notion image
    notion image

    2️⃣ textContent

    1) innerHTML

        <script>
      // textContent
      function setTextContent() {
        let dom = document.querySelector("#textDisplay");
        dom.innerHTML = "<h1>Hello</h1>";
      }
    </script>
    notion image

    2) textContent (잘 사용 안 함)

    렌더링 없이 텍스트 그대로 출력
    “ ” 안의 내용을 객체가 아니라 텍스트로 인식
        <script>
      // textContent
      function setTextContent() {
        let dom = document.querySelector("#textDisplay");
        dom.textContent = "<h1>Hello</h1>";
      }
    </script>
    notion image

    3️⃣ createElement, append, prepend

    1) append

        <script>
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");
        dom.append("<h1>Hello</h1>");
      }
    </script>
    notion image
        <script>
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");
        
        let item = document.createElement("h1");
        item.innerHTML = "hello";
        dom.append(item);
      }
    </script>
    notion image
    append는 뒤로 쌓인다
        <script>
      let num = 1;
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "hello" + num;
        dom.append(item);
      }
    </script>
    notion image

    2) 초기화

        <script>
      // createElement, append, prepend
      function clearElements() {
        let dom = document.querySelector("#elementContainer");
        dom.innerHTML = "";
      }
    </script>
    notion image
    ⬇️
    notion image

    3) prepend

        <script>
      // createElement, append, prepend
      function createAndPrepend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "hello" + num;
        dom.prepend(item);
        num++;
      }
    </script>
    notion image

    4) 코드 정리

        <script>
      let num = 1;
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "append" + num;
        dom.append(item);
        num++;
      }

      function createAndPrepend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "prepend" + num;
        dom.prepend(item);
        num++;
      }

      function clearElements() {
        let dom = document.querySelector("#elementContainer");
        dom.innerHTML = "";
      }
    </script>
    notion image

    4️⃣ before, after

        <script>
      let num = 1;
      // before, after
      function addBefore() {
        let dom = document.querySelector("#target");

        let item = document.createElement("h1");
        item.innerHTML = "before" + num;
        dom.before(item);
        num++;
      }

      function addAfter() {
        let dom = document.querySelector("#target");

        let item = document.createElement("h1");
        item.innerHTML = "after" + num;
        dom.after(item);
        num++;
      }

      function resetBeforeAfter() {
        location.reload();
      }
    </script>
    notion image
    ⬇️ 초기화
    notion image

    5️⃣ setAttribute

        <script>
      // setAttribute
      function setImageAttr() {
        let dom = document.querySelector("#myImage");
        dom.setAttribute(
          "src",
          "https://i.pinimg.com/736x/2b/53/aa/2b53aa45b761b66b554cdf52270f0be9.jpg"
        );
        dom.setAttribute("width", "100px");
        dom.setAttribute("heigth", "100px");
      }
    </script>
    notion image

    6️⃣ 전체 코드

    <!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>2. DOM에 내용 그리기</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        max-width: 800px;
        margin: 50px auto;
        padding: 20px;
      }
      .section {
        margin: 30px 0;
        padding: 20px;
        background: #f5f5f5;
        border-radius: 5px;
      }
      input,
      textarea {
        width: 100%;
        padding: 10px;
        margin: 10px 0;
        box-sizing: border-box;
      }
      button {
        padding: 10px 20px;
        margin: 5px;
        cursor: pointer;
        background: #2196f3;
        color: white;
        border: none;
        border-radius: 5px;
      }
      button:hover {
        background: #0b7dda;
      }
      #display {
        padding: 15px;
        margin: 10px 0;
        background: white;
        border: 1px solid #ddd;
        border-radius: 5px;
        min-height: 50px;
      }
      .new-element {
        padding: 10px;
        margin: 5px 0;
        background: #4caf50;
        color: white;
        border-radius: 5px;
      }
    </style>
  </head>
  <body>
    <h1>2. DOM에 내용 그리기 (DOM Manipulation)</h1>

    <div class="section">
      <h2>value 사용 (Form 요소)</h2>
      <input type="text" id="myInput" placeholder="입력하세요" />
      <button onclick="setValue()">value로 값 설정</button>
      <button onclick="getValue()">value 값 가져오기</button>
      <p id="inputResult"></p>
    </div>

    <div class="section">
      <h2>textContent</h2>
      <button onclick="setTextContent()">textContent 사용</button>
      <div id="textDisplay" class="display"></div>
    </div>

    <div class="section">
      <h2>createElement, append, prepend</h2>
      <button onclick="createAndAppend()">append로 추가</button>
      <button onclick="createAndPrepend()">prepend로 추가</button>
      <button onclick="clearElements()">초기화</button>
      <div id="elementContainer" class="display"></div>
    </div>

    <div class="section">
      <h2>before, after</h2>
      <div
        id="target"
        style="
          padding: 15px;
          background: #ff9800;
          color: white;
          border-radius: 5px;
        "
      >
        타겟 요소
      </div>
      <button onclick="addBefore()">before로 앞에 추가</button>
      <button onclick="addAfter()">after로 뒤에 추가</button>
      <button onclick="resetBeforeAfter()">초기화</button>
    </div>

    <div class="section">
      <h2>setAttribute</h2>
      <img id="myImage" />
      <br /><button onclick="setImageAttr()">setAttribute로 이미지 설정</button>
    </div>

    <script>
      // value 사용
      function setValue() {
        let dom = document.querySelector("#myInput");
        dom.value = "hello";
      }

      function getValue() {
        let dom = document.querySelector("#myInput");
        let text = dom.value;
        alert(text);
      }

      // textContent
      function setTextContent() {
        let dom = document.querySelector("#textDisplay");
        dom.textContent = "<h1>Hello</h1>";
      }

      let num = 1;
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "append" + num;
        dom.append(item);
        num++;
      }

      function createAndPrepend() {
        let dom = document.querySelector("#elementContainer");

        let item = document.createElement("h1");
        item.innerHTML = "prepend" + num;
        dom.prepend(item);
        num++;
      }

      function clearElements() {
        let dom = document.querySelector("#elementContainer");
        dom.innerHTML = "";
      }

      // before, after
      function addBefore() {
        let dom = document.querySelector("#target");

        let item = document.createElement("h1");
        item.innerHTML = "before" + num;
        dom.before(item);
        num++;
      }

      function addAfter() {
        let dom = document.querySelector("#target");

        let item = document.createElement("h1");
        item.innerHTML = "after" + num;
        dom.after(item);
        num++;
      }

      function resetBeforeAfter() {
        location.reload();
      }

      // setAttribute
      function setImageAttr() {
        let dom = document.querySelector("#myImage");
        dom.setAttribute(
          "src",
          "https://i.pinimg.com/736x/2b/53/aa/2b53aa45b761b66b554cdf52270f0be9.jpg"
        );
        dom.setAttribute("width", "100px");
        dom.setAttribute("heigth", "100px");
      }
    </script>
  </body>
</html>
    Share article
    Contents
    1. DOM Manipulation(조작)1️⃣ DOM Manipulation 이란?2️⃣ DOM Manipulation으로 할 수 있는 일2. 실습0️⃣ 실습 예제1️⃣ value 사용하기2️⃣ textContent3️⃣ createElement, append, prepend4️⃣ before, after5️⃣ setAttribute6️⃣ 전체 코드

    DailyCoding

    RSS·Powered by Inblog