자바스크립트로 html 생성하기

자바스크립트로 html 생성하는 방법이 중요한 이유

자바스크립트로 html 생성하는 중요한 이유는"확장성"을 좋게 하기 위함이다.

예로 쇼핑몰을 들어보자. 쇼핑몰에는 수 많은 옷들이 있고 사이즈가 존재한다. 이 사이즈들의 재고가 무한대가 아니기 때문에 언제 재고가 부족해질지 모른다. 그렇다면 사이즈의 재고가 없을 때마다 html을 수정해줘야할 것이다...

하지만 우리에겐 이런 수고로움을 없애줄 수 있는 방법이 있다.
바로 자바스크립트로 html을 생성해주는 확장성 좋은 코드를 만들어 놓으면 된다.

<div id="container">
/*자바스크립트로 생성할 html 자리*/ 
</div>

1. document.createElement('생성할 태그')

let a = document.createElement('p');
document.querySelector('#test').appendChild(a);

위와 같은 방법으로 사용하면 너무 길어진다는 단점이 있다.

2. 변수에 html의 형태를 문자열로 저장하여 생성하는 방법

let b = '<p>안녕하세요</p>';
document.querySelector('#test').insertAdjacentHTML('beforeend', b);
$('#test').append(b); // 

h5 -insertAdjacentHTML(위치, 추가할 html) : 문자형 HTML 넣어주는 함수 (insertAdjacentHTML와 제이쿼리의 append는 같은 함수이다.)

** 참고
append와 insertAdjacentHTML은 추가해주는 문법이라서 하단에 계속해서 추가해준다.
추가하는 방법말고 내가 원하는 html로 바꾸고싶다면 innerHTML 이나 jQuery인 .html('')문법을 사용해주면 된다.

출처. 코딩애플