JS로 HTML 동적 생성

작성해주신 코드 중에 [class 기능] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class 을 이용하는 것은 없어보이고요 제가 추천하는, 프레임워크 없이 동적으로 html을 구현하는 방법에는 1. <template> - html 구문의 재활용 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template 2. custom element - html 요소를 자체적인 컴포넌트로 사용하여 재활용 - https://developer.mozilla.org/en-US/docs/Web/API/Web_components/Using_custom_elements 를 이용하는 방법이 있습니다. 둘다 혼용하여 사용할 수 있는 기능이며, 현재 custom element는 기능이 출시된지는 이미 오래 되었지만 최근 다시 트렌드로 부상하는 기능입니다. 특히 custom element 말씀하신 class 기능을 활용해야 하는 요구사항이 있어 어찌보면 찾으시는 방법이라고 할 수 있겠습니다.