ajax1 숙제 관련 질문입니다

foreach가 바로 생각이 안나서 for 문 그냥 써도 되는 것은 확인했는데

for (i = 0; i < products.length; i++) {
  var 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>`;
  $(".row").append(temp);
}

각 html문장을 하나씩 써서 붙여넣는 것에 대해서는 왜 안되는지 잘 모르겠습니다

let child = document.createElement("div");
let child2 = document.createElement("img");
let child3 = document.createElement("h5");
let child4 = document.createElement("p");
child2.src="https://via.placeholder.com/600"

for (var i = 0; i < products.length; i++) {
  document.querySelector(".row").appendChild(child);
  document.querySelectorAll(".row div")[i].className = "col-sm-4";
  var caldiv = document.querySelectorAll(".col-sm-4")[i];
  caldiv.appendChild(child3);
  caldiv.appendChild(child4);
  caldiv.querySelector("h5").innerHTML = products[0].title;
  caldiv.querySelector("p").innerHTML = `가격: ${products[0].price} 원`;
}

코드도 길어지고 문장 하나씩 넣는 것이 의미는 없어보어지만 안되는 이유라도 알고 싶어 질문합니다