Javascript HTML列表元素

我在一个HTML文档中有两个列表。两个列表都包含不同的数据

我的要求是，如果用户选择一个列表中的项目，那么相同的项目应该添加到同一位置的另一个列表中

例如。

list 1  - Hi, Hello       
list 2  - Thanks, Welcome

假设用户在列表1中选择“Hi”，然后在列表2中选择“Thank”“Thank”替换为位于同一位置的

“Hi”

我在internate上读到，我们可以通过使用java脚本来实现这一点，但我还没有得到任何解决方案

请帮帮我

---

谢谢

我们的标记如下：

<div>
  <ul id='list-1'>
    <li>Hi</li>
    <li>Hello</li>
  </ul>
</div>

<div>
  <ul id='list-2'>
    <li>Thanks,</li>
    <li>Welcome</li>
 </ul>
</div>

然后，我们在这些元素的子元素中查找列表项：

var listOneItems = listOne.getElementsByTagName('li') //returns an array
   ,listTwoItems = listTwo.getElementsByTagName('li');

接下来，我们设置单击第一个列表中的列表项时要执行的操作：

for(var i=0; i<listOneItems.length; i++){
 /*we use swap.call so that the function is in the context of this
   list item*/
 listOneItems[i].onclick = swap.call(listOneItems[i], i);   
}

---

您可以看到它正在运行

我想您可以使用jquery来实现这一点。但请发布您的代码。您想要的是在用户单击时交换同一索引上的列表项？

for(var i=0; i<listOneItems.length; i++){
 /*we use swap.call so that the function is in the context of this
   list item*/
 listOneItems[i].onclick = swap.call(listOneItems[i], i);   
}

/*this function returns the listener for the element, using a closure
  to bind the correct elements*/
function swap(i){
  var elem = this;
  return function(){
    listTwoItems[i].innerHTML = elem.innerHTML;  
  }
}