title: Reordering HTML list items with JS
body: <p>I'm trying to move a list item in a standard unordered list but have no idea where to start. I can't access the HTML and only have a client JS file so guess I would have to do it through JS.</p>
  
  <p>The list looks like this:</p>
  
  <pre><code>    &lt;nav id="main_navigation"&gt;
      &lt;ul class="level_1 children_9"&gt;
          &lt;li class="level_1 first" id="1"&gt;
              &lt;a class="level_1" href="#"&gt;Item 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="level_1" id="2"&gt;
              &lt;a class="level_1" href="#"&gt;Item 2&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="level_1" id="3"&gt;
              &lt;a class="level_1" href="#"&gt;Item 3&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="level_1" id="4"&gt;
              &lt;a class="level_1" href="#"&gt;Item 4&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="level_1" id="5"&gt;
              &lt;a class="level_1" href="#"&gt;Item 5&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
      &lt;/nav&gt;
  </code></pre>
  
  <p>I want to move item 4 to where item 1 is and maintain the rest of the order.</p>
  
  <p>The only examples I have found involve reorder on click which is way too complicated.</p>
  
  <p>Any help here would be greatly appreciated.</p>
  
  <p>Thanks,</p>
  
  <p>Adam</p>