
[JS] JavaScript의 append를 이용한 HTML 요소 생성하기
2022. 5. 15. 00:16
🔥 Front-End/JavaScript
위와 같이 홈페이지 상품 목록을 생성한다고 가정해보겠습니다. HTML에 요소들을 직접 생성해서 하드코딩할 수도 있겠지만, 데이터가 변경될 때마다 HTML 요소를 계속해서 직접 수정해줘야하는 번거로움이 생깁니다. 반면, 배열과 JavaScript를 이용하면 데이터가 변할때마다 변경사항을 자동으로 반영할 수 있습니다. JavaScript를 이용하면 DOM 객체에 접근하여 HTML 요소를 직접 생성, 수정, 삭제할 수 있습니다. 아래의 비어있는 HTML 요소인 div 클래스 row에 상품 리스트를 추가해보겠습니다. 상품 리스트가 배열안에 객체 형식으로 담겨있습니다. let products = [ {id: 0, price: 70000, title: "꽃무늬 원피스"}, {id: 1, price: 50000, t..