如何将商品动态添加到购物车？

Question

我为在线商店创建了购物车，并且购物车添加了我在HTML中创建的元素。之后，我使用JavaScript创建了元素，但是现在这些项目没有像它们在HTML中那样添加到购物车中。我怀疑它与DOM有关，但是使用JavaScript创建的元素看起来与我的HTML元素相同。请告诉我我在做什么错。

HTML购物车代码

<section class="container content-section">
  <h2 class="section-header">CART</h2>
  <div class="cart-row">
    <span class="cart-item cart-header cart-column">ITEM</span>
    <span class="cart-price cart-header cart-column">PRICE</span>
    <span class="cart-quantity cart-header cart-column">QUANTITY</span>
  </div>

  <div class="cart-items">
  </div>
  <div class="cart-total">
    <strong class="cart-total-title">Total</strong>
    <span class="cart-total-price">R0</span>
  </div>
  <button class="btn btn-primary btn-purchase ml-auto" type="button">
    PURCHASE
  </button>
</section>

使用javascript创建元素

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready);
} else {
  ready();
}
function ready() {
  let shop_item = document.createElement("div");
  shop_item.setAttribute("class", "shop-item");
  let span = document.createElement("span");
  span.setAttribute("class", "shop-item-title");
  span.textContent = "Vladdin";
  let pic = document.createElement("img");
  pic.setAttribute("class", "shop-item-image");
  pic.src = "Pictures/Vladdin.jpg";
  let div_2 = document.createElement("div");
  div_2.setAttribute("class", "shop-item-details");
  let price = document.createElement("span");
  price.textContent = "R300-00";
  price.setAttribute("class", "shop-item-price");
  let add = document.createElement("button");
  add.setAttribute("class", "btn btn-primary shop-item-button");
  add.setAttribute("type", "button");
  add.textContent = "ADD TO CART";
  div_2.append(price, add);
  shop_item.append(span, pic, div_2);
  document.getElementsByClassName("shop-items")[0].appendChild(shop_item);
}

将元素添加到购物车

if (document.readyState == "loading") {
  document.addEventListener("DOMContentLoaded", ready);
} else {
  ready();
}

function ready() {
  var remove = document.getElementsByClassName("btn-danger");
  for (var i = 0; i < remove.length; i++) {
    var button = remove[i];
    button.addEventListener("click", removeCartItem);
  }
  var quantityInputs = document.getElementsByClassName("cart-quantity-input");
  for (var i = 0; i < quantityInputs.length; i++) {
    var input = quantityInputs[i];
    input.addEventListener("change", quantityChanged);
  }
  var addToCartButtons = document.getElementsByClassName("shop-item-button");
  for (var i = 0; i < addToCartButtons.length; i++) {
    var button = addToCartButtons[i];
    button.addEventListener("click", addToCartClicked);
  }
  document
    .getElementsByClassName("btn-purchase")[0]
    .addEventListener("click", purchaseClicked);
}
// Message after the purchase button has been clicked .
function purchaseClicked() {
  alert(
    "Thank you for your purchase ! Please browse the store for more specials "
  );
  var cartItems = document.getElementsByClassName("cart-items")[0];
  while (cartItems.hasChildNodes()) {
    cartItems.removeChild(cartItems.firstChild);
  }
  updateCartTotal();
}

function removeCartItem(event) {
  var buttonClicked = event.target;
  buttonClicked.parentElement.parentElement.remove();
  updateCartTotal();
}
function addToCartClicked(event) {
  var button = event.target;
  var shopItem = button.parentElement.parentElement;
  var title = shopItem.getElementsByClassName("shop-item-title")[0].innerText;
  var price = shopItem.getElementsByClassName("shop-item-price")[0].innerText;
  var imageSrc = shopItem.getElementsByClassName("shop-item-image")[0].src;
  addItemToCart(title, price, imageSrc);
  updateCartTotal();
}
function addItemToCart(title, price, imageSrc) {
  var cartRow = document.createElement("div");
  cartRow.classList.add("cart-row");
  var cartItems = document.getElementsByClassName("cart-items")[0];
  var cartItemNames = cartItems.getElementsByClassName("cart-item-title");
  for (var i = 0; i < cartItemNames.length; i++) {
    if (cartItemNames[i].innerText == title) {
      quantityChanged();
    }
  }
  /// Adds content to Chart
  var cartRowContents = `
      <div class="cart-item cart-column">
          <img class="cart-item-image" src="${imageSrc}" width="100" height="100">
          <span class="cart-item-title">${title}</span>
      </div>
      <span class="cart-price cart-column">${price}</span>
      <div class="cart-quantity cart-column">
          <input class="cart-quantity-input" type="number" value="1">
          <button class="btn btn-dark" type="button">REMOVE</button>
      </div>`;
  cartRow.innerHTML = cartRowContents;
  cartItems.append(cartRow);
  cartRow
    .getElementsByClassName("btn-dark")[0]
    .addEventListener("click", removeCartItem);
  cartRow
    .getElementsByClassName("cart-quantity-input")[0]
    .addEventListener("change", quantityChanged);
}

function updateCartTotal() {
  var cartItemContainer = document.getElementsByClassName("cart-items")[0];
  var cartRows = cartItemContainer.getElementsByClassName("cart-row");
  var total = 0;
  for (var i = 0; i < cartRows.length; i++) {
    var cartRow = cartRows[i];
    var priceElement = cartRow.getElementsByClassName("cart-price")[0];
    var quantityElement = cartRow.getElementsByClassName(
      "cart-quantity-input"
    )[0];
    var price = parseFloat(priceElement.innerText.replace("R", "", "-00"));
    var quantity = quantityElement.value;
    total = total + price * quantity;
    console.log(total);
  }
  total = Math.round(total * 100) / 100;
  document.getElementsByClassName("cart-total-price")[0].innerText =
    "R" + total;
}
function quantityChanged(event) {
  var input = event.target;
  if (isNaN(input.value) || input.value <= 0) {
    input.value = 1;
  }
  updateCartTotal();
}

将js元素添加到HTML

<section class="container content-section">
      <h2 class="section-header">Devices</h2>
      <div class="shop-items">
      </div>
</section>