html 동적 생성

[mane]

function productItem(item){

  item.forEach(function (a){

    let div = document.createElement('div');
    div.classList.add('col-sm-4');

    let img = document.createElement('img');
    img.src = 'https://via.placeholder.com/600';
    img.classList.add('w-100');

    let h5 = document.createElement('h5');
    h5.innerHTML = a.title;

    let p = document.createElement('p');
    p.innerHTML = `가격 : ${a.price}`;

    document.querySelector('.row').appendChild(div);
    document.querySelector('.col-sm-4').appendChild(img);
    document.querySelector('.col-sm-4').appendChild(h5);
    document.querySelector('.col-sm-4').appendChild(p);
  })
}

이렇게 작성하면 왜 일자로 쭉 내려갈까요 옆으로 3개씩 생성이 안되구요..

[codingapple]

첫째 col-sm-4 박스에만 계속 추가되는걸수도요 개발자도구 html을 확인해봅시다

[글쓴이]

글