title: How do I take the output from a shuffle function and moves around DOM elements?
body: <p>So I have this HTML:</p>
  
  <pre><code> &lt;ul class="deck"&gt;
          &lt;li class="card"&gt;
              &lt;i class="fa fa-diamond"&gt;&lt;/i&gt;
          &lt;/li&gt;
          .....(16 total list items here)
      &lt;/ul&gt;
  </code></pre>
  
  <p>And this javascript:</p>
  
  <pre><code>const arrayOfCards = $('.card');
  
  function shuffle(array) {
  var currentIndex = array.length, temporaryValue, randomIndex;
  
  while (currentIndex !== 0) {
      randomIndex = Math.floor(Math.random() * currentIndex);
      currentIndex -= 1;
      temporaryValue = array[currentIndex];
      array[currentIndex] = array[randomIndex];
      array[randomIndex] = temporaryValue;
  }
  return array;
  }
  shuffle(arrayOfCards);
  </code></pre>
  
  <p>That function takes the cards (it's a card memory game) and shuffles them, but it doesn't move around the cards...I need to somehow move the cards around, I don't know how to do it. Should I, instead of having that HTML, create the cards (list items) dynamically from jQuery or what? I'm really confused here. </p>