InnerHTML 没有更新？

Question

尝试将产品推荐加载到 HTML 中，我可以看到响应很好，并且我收到了预期的数据，但我没有看到 DOM 有任何变化。大部分代码是从 Shopify 文档中提取的，不确定问题出在哪里。所有这些代码都在 cart-drawer.liquid 文件中

$( document ).ready(function() {
    var list = document.querySelector(".product-recommendations__list");
    console.log(list)
    // Get the base URL for translated product recommendations
    var baseUrl = list.dataset.baseUrl;
    console.log(baseUrl)
    // Get the product ID to request the product recommendations
    var productId = list.dataset.productId;
    console.log(productId)
    // Create an AJAX request
    var request = new XMLHttpRequest();

    request.open(
      "GET",
      baseUrl + ".json?product_id=" + productId + "&limit=4"
    );

    request.onload = function() {

      if (request.status === 404 || request.status === 422) {
        return hideRecommendationsSection();
      }

      var products = JSON.parse(request.response).products;

      if (products.length === 0) {
        return hideRecommendationsSection();
      }

      // Append product recommendations to the DOM.
      console.log(products)
      list.innerHTML = products.map(function(product) { return renderProduct(product) }).join("");
      console.log(list.innerHTML)
    };

    request.onerror = function() {
      hideRecommendationsSection();
    };

    // Send AJAX request
    request.send();

    function hideRecommendationsSection() {
      console.log('in hideRecommendations')
      list.style.display = "none";
    }

    function renderProduct(product) {
      return [
        '<div>',
        '<a href="' + product.url + '" class="product__anchor">',
        '<img class="product__img" src="' + product.featured_image + '" alt="'+ product.title +'"/>',
        '<p class="product__title">' + product.title + '</p>',
        '<p class="product__price">' + product.price + '</p>',
        '</a>',
        '</div>'
      ].join("");
    }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="product-recommendations__list" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ item.product_id }}"></div>

Answer 1

该列表变量是一个 dom 元素列表，因此请尝试在更改 dom 之前先循环尝试这可能会有所帮助

list.foreEach(domElement=>{
    domElement.innerHTML = products.map(function(product) { return renderProduct(product) }).join("")
 })