---

동적 html 생성

결론 : 변수에 html을 넣고, append(변수)아니라 그냥 바로 append(html 코드)를 하자

• 이유 : append(변수)를 이용하면, 화면에 변수의 초기값도 생성된다.

$(".card-group").html("");
for (let i = 0; i < lowPriceProducts.length; i++) {
  $(".card-group").append(`<div class="card">
  <img src="https://via.placeholder.com/600" />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p>가격 : <span class="card-price">70000</span>원</p>
    <button class="btn btn-danger">주문하기</button>
  </div>
</div>`);
  $(".card-title").eq(i).text(lowPriceProducts[i].title);
  $(".card-price").eq(i).text(lowPriceProducts[i].price);
}

첫번째 : 일단 html을 없앤다.

$(".card-group").html("");

두번째 : 원하는 부분에 html을 넣는다.

for (let i = 0; i < lowPriceProducts.length; i++) {
  $(".card-group").append(`<div class="card">
  <img src="https://via.placeholder.com/600" />
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p>가격 : <span class="card-price">70000</span>원</p>
    <button class="btn btn-danger">주문하기</button>
  </div>
</div>`);
}