[Javascript] createElement, forEach, innerHTML, append 활용 예시

append() 관련 검색 중 제목에 담긴 메소드를 모두 활용한 코드 예시가 있어 보관 목적으로 가져왔다.

 

HTML에 요소를 직접 생성하지 않고 JS로만 아래 사항을 구현했다.

①HTML 요소를 생성함.

②row class 요소 안의 자식 요소로 추가삽입함.

②innerHTML을 활용해 <img> 태그와 배열 item을 객체로 title 및 price property 활용함

③배열 item을 객체로 순회할 수 있도록 forEach() 사용함.

 

(1)HTML

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

 

(2)JS

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

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