Как поменять подписи двух списков в Javascript?

Question

Я пытаюсь обменять два списка, используя только JavaScript, но любой подход, который я пытаюсь, кажется, терпит неудачу.

Эти два списка у меня есть:

<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/> 

До сих пор я пытался переборе каждого списка, как так:

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

for (index = 0; index < myFirstList.length; index++) 
{ 
    temp.appendChild(myFirstList.removeChild(myFirstList[0]); 
} 

for (index = 0; index < mySecondList.length; index++) 
{ 
    myFirstList.appendChild(mySecondList.removeChild(mySecondList[0])); 
} 

for (index = 0; index < temp.length; index++) 
{ 
    mySecondList.appendChild(temp.removeChild(temp[0])); 
} 

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

Я также попытался:

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); 

Ни одна из них не подменяет подписи в l1 и l2. Любые предложения будут полезны.

Answer 1

Я не понял, что вы подразумеваете под заменой, пожалуйста, уточните, однако, если вы хотите перебрать элементы li с помощью их родительской ul, вы можете сделать что-то вроде.

var sublist1 = document.getElementById('e1'); 
for (var i=0; i<sublist1.children.length; i++){ 
     sublist1.children[i].innerHTML = someVariable; 
} 

Answer 2

Ваша проблема может быть легко решена с помощью JQuery appendTo метод.

var childL1 = $('#e1').children(); 
var childL2 = $('#e2').children(); 

childL2.appendTo($('#e1')); 
childL1.appendTo($('#e2')); 

Answer 3

Попробуйте это.

var sublist1 = document.getElementById('e1'); 
var sublist2 = document.getElementById('e2'); 

document.getElementsByTagName('ul')[0].childNodes[1].appendChild(sublist2); 
document.getElementsByTagName('ul')[0].childNodes[3].appendChild(sublist1);