title: InnerHTML not updating?
body: <p>Trying to load product recommendations into HTML, I can see the response is good and I am receiving the expected data but I'm not seeing any changes to the DOM. Most of this code was pulled from Shopify documentation, not sure what the problem is. All of this code is inside of a cart-drawer.liquid file</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$( 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 + "&amp;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 [
          '&lt;div&gt;',
          '&lt;a href="' + product.url + '" class="product__anchor"&gt;',
          '&lt;img class="product__img" src="' + product.featured_image + '" alt="'+ product.title +'"/&gt;',
          '&lt;p class="product__title"&gt;' + product.title + '&lt;/p&gt;',
          '&lt;p class="product__price"&gt;' + product.price + '&lt;/p&gt;',
          '&lt;/a&gt;',
          '&lt;/div&gt;'
        ].join("");
      }
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;div class="product-recommendations__list" data-base-url="{{ routes.product_recommendations_url }}" data-product-id="{{ item.product_id }}"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p><a href="https://i.stack.imgur.com/5eLYi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5eLYi.png" alt="Screenshot of the data being logged, as well as the innerHTML of the element right after the insertion of the HTML" /></a></p>
  <p><a href="https://i.stack.imgur.com/Qkvzm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Qkvzm.png" alt="Screenshot of the element" /></a></p>