<p>If I have a list like this:</p>

<pre><code>&lt;ul id="mylist"&gt;
    &lt;li id="list-item1"&gt;text 1&lt;/li&gt;
    &lt;li id="list-item2"&gt;text 2&lt;/li&gt;
    &lt;li id="list-item3"&gt;text 3&lt;/li&gt;
    &lt;li id="list-item4"&gt;text 4&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

<p>What's the easiest way to re-arrange the DOM nodes to my preference? (This needs to happen automatically when the page loads, the list-order preference is gained from a cookie)</p>

<p>E.g.</p>

<pre><code>&lt;ul id="mylist"&gt;
    &lt;li id="list-item3"&gt;text 3&lt;/li&gt;
    &lt;li id="list-item4"&gt;text 4&lt;/li&gt;
    &lt;li id="list-item2"&gt;text 2&lt;/li&gt;
    &lt;li id="list-item1"&gt;text 1&lt;/li&gt;
&lt;/ul&gt;
</code></pre>

Though there's probably an easier way to do this using a JS Library, here's a working solution using vanilla js.
```
```
var list = document.getElementById('mylist');

var items = list.childNodes;
var itemsArr = [];
for (var i in items) {
    if (items[i].nodeType == 1) { // get rid of the whitespace text nodes
        itemsArr.push(items[i]);
    }
}

itemsArr.sort(function(a, b) {
  return a.innerHTML == b.innerHTML
          ? 0
          : (a.innerHTML > b.innerHTML ? 1 : -1);
});

for (i = 0; i < itemsArr.length; ++i) {
  list.appendChild(itemsArr[i]);
}
```
```