title: Reordering elements on an HTML form using Vanila JS: what's the best practice in terms of performance?
body: <p>Image we have a form with a button to make table rows randomly rearrange every second, and a button to sort rows based on some criteria.</p>
  
  <p>I made one example here <a href="https://codesandbox.io/s/dawn-water-l2m7g" rel="nofollow noreferrer">https://codesandbox.io/s/dawn-water-l2m7g</a> without using any JS libraries.</p>
  
  <p>The way I rearrange the rows in the form is to manipulating the JSON object and regenerate the dom element as a whole</p>
  
  <pre><code>let list = TABLE_DATA; // from the JSON file
  ...
  
  function startRandom() {
    timer = setInterval(function() {
      list = list.sort(randomSort);
      renderList(list);
    }, 1000);
  }
  
  function renderList(list) {
    const res = list
      .map(item =&gt; {
        return renderRow(xssFilter(item));
      })
      .join("");
  
    tbody.innerHTML = res;
  }
  
  function renderRow(item) {
    return `
      &lt;tr&gt;
          &lt;td&gt;${item.id}&lt;/td&gt;
          &lt;td&gt;&lt;img src="${item.thumbnailUrl}" /&gt;&lt;/td&gt;
          &lt;td&gt;${item.name}&lt;/td&gt;
          &lt;td&gt;${item.price}&lt;/td&gt;
      &lt;/tr&gt;
      `;
  }
  
  </code></pre>
  
  <p>This website works, but I guess every time <code>renderList</code> is invoked, the whole <code>tbody</code> is going to be destroyed and recreated again. Not good performance-wise. </p>
  
  <p>I hope someone can take a look at it and make some optimizations based on the functionalities it has now. For example, maybe <code>DocumentFragment</code> can help. But I'm not sure.</p>
  
  <p>I don't have much experience dealing with front end development but I feel like this example is not uncommon so I really want to know what is the best practice here and how can we make it better.</p>