How to swap sublists of two lists in Javascript?

I'm trying to swap two lists using only JavaScript but any approach I try seems to fail.

These are the two lists I have:

    <h3>Lists</h3>
    <ul >
    <li >l<sub>1  </sub>    
    <ul id="e1">
    <li>l<sub>11</sub>-a</li>
    <li>l<sub>12</sub>-b</li>
    <li>l<sub>13</sub>-a</li>
    <li>l<sub>14</sub>-a</li>
    <li>l<sub>15</sub>-b</li>
    <li>l<sub>16</sub>-b</li>
    </ul></li>
    <li >l<sub>2  </sub>    
    <ul id="e2"> 
    <li>l<sub>21</sub>-b</li>
    <li>l<sub>22</sub>-a</li>
    <li>l<sub>23</sub>-a</li>
    <li>l<sub>24</sub>-b</li>
    </ul></li>
    </ul>
    <br/>

So far, I've tried iterating through each list like so:

    var temp, index;
    var myFirstList  = document.getElementById("e1").getElementsByName("li");
    var mySecondList = document.getElementById("e2").getElementsByName("li");

    for (index = 0; index 

I've also tried:

var myFirstList  = document.getElementById("e1").getElementsByName("li");
    var mySecondList = document.getElementById("e2").getElementsByName("li");

    document.getElementById("e1").removeAttribute(("li");
    document.getElementById("e2").removeAttribute(("li");

    document.getAttribute("e1").appendChild(myFirstList);
    document.getAttribute("e2").appendChild(mySecondList);

Neither of these swapping the sublists in l1 and l2. Any suggestions would be helpful.