title: How can I reorder/sort a NodeList in JavaScript?
body: <p>I have what I think should be a straightforward question; let me quickly explain:</p>
  
  <p>In my JavaScript, <code>food.xml</code> is read in with:</p>
  
  <pre><code>getMenuXml.open("GET","food.xml",false);
  getMenuXml.send();
  xmlDoc=getMenuXml.responseXML;
  xmlFoodList = xmlDoc.getElementsByTagName("food");
  </code></pre>
  
  <p>so that now I have a NodeList <code>xmlFoodList</code> with all the food elements. Great so far. The problem is I want to sort the nodes based on an element <code>&lt;category&gt;</code> inside. I can read that with:</p>
  
  <pre><code>xmlFoodList[i].getElementsByTagName("category")[0].childNodes[0].nodeValue
  </code></pre>
  
  <p>Later in my code, the food items are displayed in a list, and as you'd expect, I want food of the same category to be listed together. So, my question is: <strong>How can I reorder the nodes in <code>xmlFoodList</code> based on their category?</strong></p>
  
  <p>Notes: I can't change <code>food.xml</code> coming in, and I don't want to edit my later code to do the sorting as the list is populated. I don't want to convert the NodeList to an array, since I'd have to rewrite a lot of later code. Performance isn't actually much of a concern, so feel free to clone/nested loop all you want. Thanks for your time.</p>