switch two <a> tag elements on the nav in the DOM wth event listeners : <p>Right now i am working on trying to swap the order of  tags on a menu so that they still maintain there event listeners and change order on the front end. For example, </p>

<pre><code> &lt;a id = "A" href = ""&gt;&lt;/a&gt;
 &lt;a id = "B" href = ""&gt;&lt;/a&gt;
 &lt;a id = "C" href = ""&gt;&lt;/a&gt;
 &lt;a id = "D" href = ""&gt;&lt;/a&gt;
</code></pre>

<p>Swap A, B, C, D to any position and at the same time switch them on the front end to represent the same order. 
Ive tried many different functions like append(), next(), however none work in a way that consistent. </p>
