Sort UL by price with vanilla JavaScript with IE11 support

Question

Very simplicity I'm trying to sort an unordered list by the price only using vanilla JS and it needs to have IE 11 support.
I'm getting a error ofdocument.querySelector(...).innerHTML and also not sure if Array.prototype.slice is supported in IE11 despite checking https://caniuse.com/
Heres what I've done:

function sort(){
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  console.log("els" + els)
   els.sort(function(a, b) {
    na = parseInt(a.querySelector('.price-item--regular > span').innerHTML);
    nb = parseInt(b.querySelector('.price-item--regular > span').innerHTML);
    document.querySelector(".products-grid").innerHTML((nb - na));
  });
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£2.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
    <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
</ul>

Answer 1

This snippet takes each item and snips of the currency symbol with "substring(1)" then pushes each item to an array. It then sorts the array and replaces each innerHTML attribute. Hope this helps!

function sort() {
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  var unsorted = [];
  for (var i = 0; i < els.length; i++) {
    unsorted.push(els[i].querySelector('.price-item--regular > span').innerHTML.substring(1));
  }
  var sorted = unsorted.sort(function(a, b) {
    return a - b
  });
  for (var i = 0; i < els.length; i++) {
    els[i].querySelector('.price-item--regular > span').innerHTML = "£" + sorted[i];
  }
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£111.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£8.31</span>
    </div>
  </li>
</ul>

Using JQuery this is a much cleaner method:

function sort() {
  var productsContainer = document.querySelector('.products-grid');
  var els = Array.prototype.slice.call(document.querySelectorAll('.products-grid > .product'));
  els.sort(function(a, b) {
    return a.querySelector('.price-item--regular > span').innerHTML.substring(1) - b.querySelector('.price-item--regular > span').innerHTML.substring(1);
  });
  $(productsContainer).append(els).html(); // THIS IS JQUERY
}

<button onclick="sort()"> sort</button>
<ul class="products-grid">
  <li class="product">
    <img src="" alt="a">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£111.96</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="b">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£10.10</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="c">
    <div class="price-item--regular">
      <span class="money pre-money" data-product-id="" style="visibility: visible;">£5.71</span>
    </div>
  </li>
  <li class="product">
    <img src="" alt="d">
    <div class="price-item--regular">
      <span class="money pre-money" style="visibility: visible;">£8.31</span>
    </div>
  </li>
</ul>