221206 dom_11.html (태그 추가)

Skills/JavaScript
221206 dom_11.html (태그 추가)

개발자 윤구나 2022. 12. 6. 10:36
<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM_event</title>
    <script>
      document.addEventListener("DOMContentLoaded", () => {
        let newDiv = document.createElement("div"); // createElement: 요소(태그)를 추가하겠다.
        let newText = document.createTextNode("Good-Morning~");

        newDiv.appendChild(newText); // newDiv 안에 newText 넣음 (자식으로 넣음)

        document.body.appendChild(newDiv); // 없었던 element(요소)를 body에 만듦

        // 방법(1)
        let attr = document.createAttribute("class"); // 클래스 속성을 만들겠다.
        attr.value = "greet"; // value로 클래스 이름 지정

        newDiv.setAttributeNode(attr);

        // 방법(2)
        newDiv.setAttribute("class", "greet");

        document.querySelector(".greet").style.fontSize = "50px";
        // 클래스만 생성해주고, 이런 스타일들은 style에 미리 꾸며두면 됨
      });
    </script>
  </head>
  <body></body>
</html>