(Javascript) createElement, forEach, innerHTML, append를 사용한 예제

append()를 검색해보니 제목에 모든 메소드를 사용한 코드 예제가 있어서 보관용으로 가져왔습니다.

다음은 HTML로 직접 요소를 생성하지 않고 JS만으로 구현한 것입니다.

①HTML 요소를 생성합니다.

② 라인 클래스 요소 내 하위 요소로 추가 삽입된다.

② innerHTML을 사용하면 – 제목 및 가격 속성의 개체로 사용되는 태그 및 배열 요소

③ forEach()를 사용하여 배열 요소를 객체로 반복합니다.

(1) HTML

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

(2)제이에스

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


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);
});

(3) 참조 URL