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

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

이 게시물을

번호	제목	글쓴이	날짜	조회 수
34	[javascript] React - Apache에 배포하기	졸리운_곰	2026.01.25	444
33	Python으로 GraphQL 서버 구현	졸리운_곰	2019.12.17	541
32	처음 만나는 GraphQL	졸리운_곰	2019.12.17	372
31	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [2]	졸리운_곰	2019.11.08	581
30	웹팩(Webpack) 이란, 웹팩 간단 정리 및 리액트(React) 기본 개발환경 세팅. [1]	졸리운_곰	2019.11.08	411
29	PHP 로 css/js 보호하기	졸리운_곰	2019.11.08	438
28	Three.js를 이용한 WebGL: 기본	졸리운_곰	2019.11.08	495
27	underscore.js로 편해지자	졸리운_곰	2018.10.16	545
26	자바스크립트로 각종 값넘기는방법	졸리운_곰	2018.01.24	518
25	form 데이터 주고 받기	졸리운_곰	2018.01.24	489
24	Node.js & WebSocket — Simple chat tutorial	졸리운_곰	2017.12.08	612
23	JavaScript 모듈화 도구, webpack	졸리운_곰	2017.10.30	539
22	웹팩이란?	졸리운_곰	2017.10.30	531
21	이해하기 쉬운 Webpack 가이드	졸리운_곰	2017.10.30	853
20	[jquery] Ajax를 품은 jQuery	졸리운_곰	2017.04.25	466
19	Create Your First Mobile App with AngularJS and Ionic	졸리운_곰	2016.11.20	1269
18	Single Page Application using AngularJs Tutorial	졸리운_곰	2016.11.20	458
17	AngularJS Tutorial - Building a Web App in 5 minutes	졸리운_곰	2016.11.20	460
16	자바스크립트의 'this' 키워드 이해하기	졸리운_곰	2016.11.17	634
15	jQuery 핵심 - 노드 다루기	졸리운_곰	2016.11.17	775

첫 페이지 1 2 끝 페이지

쓰기

태그