[JS] JavaScript의 append를 이용한 HTML 요소 생성하기

결과물

 

위와 같이 홈페이지 상품 목록을 생성한다고 가정해보겠습니다.

HTML에 요소들을 직접 생성해서 하드코딩할 수도 있겠지만, 데이터가 변경될 때마다 HTML 요소를 계속해서 직접 수정해줘야하는 번거로움이 생깁니다.

반면, 배열과 JavaScript를 이용하면 데이터가 변할때마다 변경사항을 자동으로 반영할 수 있습니다.

JavaScript를 이용하면 DOM 객체에 접근하여 HTML 요소를 직접 생성, 수정, 삭제할 수 있습니다.

 

아래의 비어있는 HTML 요소인 div 클래스 row에 상품 리스트를 추가해보겠습니다.

<div class="container">
  <div class="row"></div>
</div>

상품 리스트가 배열안에 객체 형식으로 담겨있습니다.

let products = [
  {id: 0, price: 70000, title: "꽃무늬 원피스"},
  {id: 1, price: 50000, title: "데님 셔츠"},
  {id: 2, price: 60000, title: "트러커 재킷"},
];

append 사용

products.forEach((a, i) => {
  const temp = document.createElement("div");
  temp.innerHTML = `<div class="col-sm-4"> 
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5> 
        <p>가격 : ${products[i].price}</p> 
      </div>`;
  document.querySelector(".row").append(temp);
});

• 1번째 줄에서, 배열에 담겨있는 요소들을 forEach 메서드를 통해 배열에 담긴 상품 리스트의 숫자만큼 동작됩니다. 즉 배열에 담긴 상품 개수만큼 요소들이 생성됩니다. 3개의 객체가 배열 안에 있으니, 3번 동작됩니다.
• 2번째 줄에서, createElement를 사용하여 div 요소를 생성한뒤 temp 변수에 담아줍니다.
• 3번째 줄에서, 변수에 innerHTML을 사용하여 HTML 요소들을 직접 담아줍니다. 백틱(``)을 사용해서 묶게 되면 싱글 쿼테이션(''), 더블 쿼테이션("")과 기능은 같지만, 둘과는 달리 줄 바꿈이 가능하며 ${ }를 사용해 객체를 담을 수 있습니다.
• 8번째 줄에서, 비어있는 HTML 요소인 row 클래스에 자식노드로 temp 객체를 삽입합니다.
• products 배열에 있는 데이터들이 화면에 렌더링 됩니다.

insertAdjacentHTML 사용

products.forEach((a, i) => {
  const temp = document.querySelector(".row").insertAdjacentHTML(
    "afterbegin", // HTML 요소가 삽입되는 위치 선언
    `<div class="col-sm-4">
        <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${a.title}</h5>
        <p>가격 : ${a.price}</p>
      </div>`
  );
});

제이쿼리 사용

products.forEach((a, i) => {
      let temp = 
      `<div class="col-sm-4">
      <img src="https://via.placeholder.com/600" class="w-100">
        <h5>${products[i].title}</h5>
        <p>가격 : ${products[i].price}</p>
      </div>`;
      $('.row').append(temp)
});

 

forEach 메서드에 대한 자세한 설명은 mdn 링크를 참조하겠습니다.

Array.prototype.forEach() - JavaScript | MDN