개발자의 삶

  • 홈
  • 태그
  • 방명록

appendChild 1

JavaScript: HTML 요소 동적 생성 (createElement, appendChild) 기초 🏗️

안녕하세요, 독자 여러분! 개발자의 삶입니다. 😊20일차 포스팅에서는 classList를 사용하여 이미 화면에 존재하는 요소의 디자인을 바꾸는 법을 배웠습니다.하지만 우리가 사용하는 웹 서비스를 생각해 볼까요? 댓글을 작성하면 즉시 아래에 새로운 댓글창이 생겨나고, 쇼핑몰에서 '장바구니 담기'를 누르면 목록에 상품이 추가됩니다. 이처럼 원래 HTML 파일에는 없던 요소를 자바스크립트를 이용해 실시간으로 만들어내는 기술, 오늘은 요소 동적 생성에 대해 알아보겠습니다.1. 도입지금까지 우리는 HTML 파일에 미리 적어둔 태그(, 등)만 다룰 수 있었습니다. 하지만 자바스크립트의 진짜 능력은 필요할 때마다 새로운 태그를 즉석에서 만들어내는 것입니다. 이것이 가능해야 게시판, 투두 리스트(To-Do List..

IT/Javascript 2025.12.18
이전
1
다음
더보기
프로필사진

개발자의 삶

  • 분류 전체보기 (40)
    • IT (40)
      • Java (0)
      • Python (0)
      • Javascript (40)
      • React (0)

Tag

코딩기초, 모멘텀클론, fetchAPI, 비동기처리, 콜백함수, localstorage, 자바스크립트, DOM조작, es6, JavaScript, 웹개발, IT블로그, classList, dom제어, 클린코드, 데이터저장, 종합실습, 프론트엔드, JSON, 참조타입,

최근글과 인기글

  • 최근글
  • 인기글

최근댓글

공지사항

페이스북 트위터 플러그인

  • Facebook
  • Twitter

Archives

Calendar

«   2026/05   »
일 월 화 수 목 금 토
1 2
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17 18 19 20 21 22 23
24 25 26 27 28 29 30
31

방문자수Total

  • Today :
  • Yesterday :

Copyright © AXZ Corp. All rights reserved.

티스토리툴바