اعمال نشدن inserAdjacentHtml

سلام من این کدو نوشتم که محصولاتم رو نمایش بده ولی اصلا کار نمیکنه چرا

let productItems = document.querySelector(".items");
let textHtml;
let products = [
  {
    id: 1,
    name: "SPORT SHOE",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.",
    price: 50,
    img: "img/1.jpg",
  },
  {
    id: 2,
    name: "SPORT SHOE",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.",
    price: 32,
    img: "img/2.jpg",
  },
  {
    id: 3,
    name: "SPORT SHOE",
    description:
      "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.",
    price: 115,
    img: "img/3.jpg",
  },
];

products.forEach(function (product) {
  textHtml =
    "div class='shoes-item'><h2>" +
    product.name +
    "</h2><span class='des'>" +
    product.description +
    "</span><img src=" +
    product.img +
    "width='75%'><div class='details'><p class='price'>" +
    product.price +
    "</p><a href='' class='btn'>SEE MORE</a></div></div>";
  productItems.insertAdjacentHTML("afterbegin", textHtml);
});