JavaScript [HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용

2022.09.09 16:59

[HTML][Javascript] JavaScript - DOM 요소의 생성 및 삭제, innerHTML, CSS 스타일 적용, JavaScript 스타일 적용

요소의 생성 및 삭제

1) 요소의 생성

메서드	설명
createElement()	createElement("div")이면 div 요소를 생성
createTextNode()	createTextNode("자바스크립트")이면 "자바스크립트" 텍스트 노드를 생성
appendChild()	요소 A.appendChild(child)일 때 child 요소의 '요소A'의 자식 요소로 만들어 줌

ex) 요소의 생성

  <body>
    <button id="bt">요소 생성</button>
  </body>
  
  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      bt.onclick = createNode;
      function createNode() {
        var div = document.createElement("div");
        var txt = document.createTextNode("div 요소가 생성 되었습니다.");
        div.appendChild(txt);
        document.body.appendChild(div);
      }
    };
  </script>

메서드	설명
setAttribute(속성, 값)	요소의 속성을 설정
getAttribute(속성)	요소의 속성값을 반환
removeAttribute(속성)	요소의 속성을 제거

ex) 요소의 속성(attribute) 추가

 <body>
    <button id="bt">요소 생성</button>
    <button id="del">속성 제거</button>
  </body>
  
  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      var del = document.getElementById("del");

      function createNode() {
        var div = document.createElement("div");
        var a = document.createElement("a");
        var txt = document.createTextNode("윤제니");
        a.appendChild(txt);
        a.setAttribute("href", "https://jenny-daru.tistory.com/");
        a.setAttribute("target", "_blank");
        a.setAttribute("title", "새창");
        div.append(a);
        document.body.appendChild(div);
      }
      bt.onclick = createNode;
      del.onclick = function () {
        var divs = document.getElementsByTagName("div");
        divs.item(0).firstChild.removeAttribute("title");
        //divs[0].firstChild.removeAttribute("title");
      };
    };
  </script>

>> [요소 생성] 버튼을 클릭 시 결과

>> [속성 제거] 버튼을 클릭시 결과

위의 코드에서 버튼 클릭시 첫번째 div의 "title"의 속성을 제거 하는 함수를 실행 하였기 때문에

첫번째 div의 "title"의 속성만 제거됨.

속성	설명
innerHTML	문자 방식으로 요소를 생성

ex) innerHTML 속성을 이용하여 요소와 속성을 생성

  <body>
    <button id="bt">요소 생성</button>
    <div id="content"></div>
  </body>
  
  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      var content = document.getElementById("content");
      bt.onclick = createNode;
      function createNode() {
        console.log("asdfa");
        content.innerHTML =
          "<a href='https://jenny-daru.tistory.com/' target='_blank' title='새창'>윤제니</a>";
      }
    };
  </script>

2) 요소의 삭제

메서드	설명
removeChild()	요소A.removeChild(child)일 때 요소A의 자식 child를 제거

  <body>
    <button id="bt">요소 제거</button>
    <div id="content">
      <a href="https://jenny-daru.tistory.com/" target="_blank" title="새창">윤제니</a>
    </div>
  </body>
  
  <script>
    window.onload = function () {
      var bt = document.getElementById("bt");
      var content = document.getElementById("content");
      bt.onclick = function () {
        content.removeChild(content.firstChild);
      };
    };
  </script>

>> 기본 화면

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

>> [요소 제거] 버튼 클릭 시 결과

JavaScript의 스타일 적용

자바스크립트 스타일 형식

요소.style.속성="속성값"

자바스크립트의 스타일 속성과 CSS의 기본 속성 형식은 같지만 속성에 대한 개별 속성은 다르다.
ex) 'border-color'의 경우 => 자바스크립트 스타일 속성에서는 '-'를 사용할 수 없어 'borderColor'와 같이 카멜 기법 사용

CSS	자바스크립트 스타일
color	color
background-color	backgroundColor
border-bottom-width	borderBottomWidth

ex) content1과 content2

    <p id="content1">내용1</p>
    <p id="content2">내용2</p>

>> content1의 style 속성

    <style>
      #content1 {
        width: 200px;
        height: 200px;
        border: 2px solid red;
        border-bottom-width: 4px;
      }
    </style>

>> content2의 style 속성은 자바스크립트로 적용

  <script>
    window.onload = function () {
      var content = document.getElementById("content2");
      content.style.width = "200px";
      content.style.height = "200px";
      content.style.border = "1px solid blue";
      content.style.borderBottomWidth = "4px";
    };
  </script>

>> 결과

[출처] https://jenny-daru.tistory.com/25

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.

이 게시물을

번호	제목	글쓴이	날짜	조회 수
13	[Next.js 개발] pm2 로 Next.js 실행하기	졸리운_곰	2025.07.01	480
12	[Next.js 개발] NextAuth.js 를 이용한 자체 로그인 구현	졸리운_곰	2024.03.09	560
11	[Next.js 개발] Using Next.js Version 13	졸리운_곰	2024.03.09	409
10	[Next.js 개발] Common Errors in Next.js and How to Resolve Them	졸리운_곰	2024.03.09	468
9	[Next.js 개발] [Javascript] 현재 날짜, 시간 구하기	졸리운_곰	2024.03.09	431
8	[Next.js 개발] Using Next.js Version 13 : Next.js 버전 13 사용	졸리운_곰	2024.03.07	499
7	[Next.js 개발] [React] useEffect에서 async/await	졸리운_곰	2024.03.06	362
6	[next.js 개발] How to use fetch API in Next.js?	졸리운_곰	2024.03.05	368
5	[next.js 개발] Next.js14에 Mysql연결하기	졸리운_곰	2024.03.05	458
4	[next.js 개발] How To Connect MySQL And Auth To A Next.js App	졸리운_곰	2024.03.05	323
3	[next.js 개발] Next.js 소개와 14 버전 변경사항 – React 인기 라이브러리	졸리운_곰	2024.03.05	523
2	[next.js 개발] next.js API 호출시 - 수신부따로 호출하고 await 붙일것	졸리운_곰	2024.03.05	555
1	[next.js 개발] [Next.js] Fetch POST body에 json 형태로 데이터 주고받기 (json형 / object형 차이)	졸리운_곰	2024.03.05	457

첫 페이지 1 끝 페이지

쓰기

태그