UI 만드는 새로운 방식 with js로 html 만들기

javascript로 html을 만들어서 넣기

<button>
</button>

<div>
</div>

• 버튼 클릭 이벤트
  • div 안의 모든 tag 없앤다.
  • 변수에 html tag를 넣는다.
    • html tag들을 백틱(`)으로 한꺼번에 감싼다.
    • 띄워쓰기는 없어야한다. 단, 엔터키는 가능
  • div에 그 변수를 넣는다.

$("button").on("click", function () {
  $("div").html("");
  const productList = `<div>맥북</div><div>모니터</div><div>키보드</div>`;
  $("div").append(productList);

• 기존의 방식 : html을 숨기고, class를 넣어서, html을 보이도록 했음