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

Jan 14, 2026

Contents

1. DOM Manipulation(조작)1️⃣ DOM Manipulation 이란?2️⃣ DOM Manipulation으로 할 수 있는 일 2. 실습 0️⃣ 실습 예제 1️⃣ value 사용하기 2️⃣ textContent 3️⃣ createElement, append, prepend 4️⃣ before, after 5️⃣ setAttribute 6️⃣ 전체 코드

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>

2️⃣ textContent

1) innerHTML


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

2) textContent (잘 사용 안 함)

렌더링 없이 텍스트 그대로 출력

“ ” 안의 내용을 객체가 아니라 텍스트로 인식


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

3️⃣ createElement, append, prepend

1) append


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


    <script>
      // createElement, append, prepend
      function createAndAppend() {
        let dom = document.querySelector("#elementContainer");
        
        let item = document.createElement("h1");
        item.innerHTML = "hello";
        dom.append(item);
      }
    </script>

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>

2) 초기화


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

⬇️

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>

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>

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>

⬇️ 초기화

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>

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>

Contents