Javascript로 HTML 태그 생성하기 - 1

Javascript로 웹에 요소 추가하기 - 1 (Preview)

Javasscript를 배우기 시작한지 한 달이 조금 넘은 것 같습니다. 아직 배운지 얼마 되지 않았지만 Javascript를 효율적으로 사용하고 익숙해지려면 계속 사용하는 방법이 제일 좋은 것 같습니다. 이러한 면에서 보면 외국어를 배우는 것과 비슷한 점이 많은 것 같습니다. 그래서, 앞으고 이 블로그를 통해서 배운 내용을 정리하는 과정을 거쳐 배운 내용을 기억에 더 오래 남을 수 있도록 하고자 합니다.

현재 연습하고 있는 프로젝트 중, Javascript의 insertAdjacentHTML Method를 사용하여 html 문서에 html 요소를 추가하는 작업이 있었습니다. 먼저 사진으로 보면 아래와 같습니다.

이 웹 애플리케이션은 브라우저의 클라이언트가 클릭 or 엔터를 누르면 새로운 Expense 아이템이 생성됩니다. 각 아이템은 Description과 value(값)의 정보를 가지고 있습니다. Data Structure를 설정해 그 안에서 데이터를 저장 및 관리하고, 이것을 UI에도 표현을 해야 합니다.

미리 설계한 신규 아이템의 HTML 테크 뭉치를 UI Module에 string type으로 변수에 저장을 합니다. 이 데이터를 ‘click’ 또는 엔터키(또는 리턴키) 이벤트 발생 시 html 파일의 적절한 위치에 추가해 주면 됩니다. 이때 insertAdjacentHTML method를 사용할 수 있습니다.

또한, HTML 테그 뭉치를 추가하기 전 태그 안의 켄턴츠를 클라이언트가 입력한 값으로 대체 해줘야 하는데 String 의 replace method를 사용할 수 있습니다.